diff --git a/404.html b/404.html
index df9ddb4aa4..98f5bf67e7 100644
--- a/404.html
+++ b/404.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>404 Page not found :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
     <style>
       p, li, ul {
         text-align: center
diff --git a/basics/changelog/index.html b/basics/changelog/index.html
index 19374d8cfd..b95955890c 100644
--- a/basics/changelog/index.html
+++ b/basics/changelog/index.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title> :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/basics/changelog/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -722,18 +722,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/basics/configuration/index.html b/basics/configuration/index.html
index df799b06ae..3eb83d8800 100644
--- a/basics/configuration/index.html
+++ b/basics/configuration/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Configuration :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/basics/configuration/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/basics/configuration/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -384,18 +384,18 @@ default values:</p>
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/basics/customization/index.html b/basics/customization/index.html
index f6d948a92b..a92f7c568a 100644
--- a/basics/customization/index.html
+++ b/basics/customization/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Customization :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/basics/customization/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/basics/customization/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -408,18 +408,18 @@ You could use an <code>img</code> HTML tag and reference an image created under
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/basics/history/index.html b/basics/history/index.html
index 05860a22bd..e7bbfb6ef9 100644
--- a/basics/history/index.html
+++ b/basics/history/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>History :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/basics/history/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/basics/history/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -724,18 +724,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/basics/index.html b/basics/index.html
index 698d21f43e..0b0dd13652 100644
--- a/basics/index.html
+++ b/basics/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Basics :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/basics/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/basics/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -271,18 +271,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/basics/installation/index.html b/basics/installation/index.html
index 0feed0392e..7179f5ad05 100644
--- a/basics/installation/index.html
+++ b/basics/installation/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Installation :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/basics/installation/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/basics/installation/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -337,18 +337,18 @@ hugo new basics/second-content/_index.md
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/basics/migration/index.html b/basics/migration/index.html
index 7e50f3b8b1..7b2e630bbc 100644
--- a/basics/migration/index.html
+++ b/basics/migration/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>What&#39;s new :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/basics/migration/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/basics/migration/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -501,18 +501,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/basics/requirements/index.html b/basics/requirements/index.html
index bd0fd54999..65037bbe3a 100644
--- a/basics/requirements/index.html
+++ b/basics/requirements/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Requirements :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/basics/requirements/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/basics/requirements/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -271,18 +271,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/categories/index.html b/categories/index.html
index bac83d776d..562ebf6f10 100644
--- a/categories/index.html
+++ b/categories/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Categories :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/categories/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/categories/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -267,18 +267,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/cont/archetypes/index.html b/cont/archetypes/index.html
index 288ded2ae4..1c233c88b5 100644
--- a/cont/archetypes/index.html
+++ b/cont/archetypes/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Archetypes :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/cont/archetypes/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -308,18 +308,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/cont/i18n/index.html b/cont/i18n/index.html
index 8ebedf5680..e04b6c12a3 100644
--- a/cont/i18n/index.html
+++ b/cont/i18n/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Multilingual and i18n :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/cont/i18n/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/cont/i18n/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -338,18 +338,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/cont/icons/index.html b/cont/icons/index.html
index 0adfac906c..f341821e7f 100644
--- a/cont/icons/index.html
+++ b/cont/icons/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Icons and logos :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/cont/icons/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -299,18 +299,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/cont/index.html b/cont/index.html
index 842a6e15ab..4334493ebc 100644
--- a/cont/index.html
+++ b/cont/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Content :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/cont/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/cont/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -271,18 +271,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/cont/markdown/index.html b/cont/markdown/index.html
index 085169ee7b..62a0b3403d 100644
--- a/cont/markdown/index.html
+++ b/cont/markdown/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Markdown syntax :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/cont/markdown/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -818,18 +818,18 @@ grunt.initConfig({
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/cont/menushortcuts/index.html b/cont/menushortcuts/index.html
index 5521cc9eaa..d999c44afb 100644
--- a/cont/menushortcuts/index.html
+++ b/cont/menushortcuts/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Menu extra shortcuts :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/cont/menushortcuts/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -386,18 +386,18 @@ However, if you want to keep the title but change its value, it can be overriden
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/cont/pages/index.html b/cont/pages/index.html
index 5972bc8a94..4e9d5dacc2 100644
--- a/cont/pages/index.html
+++ b/cont/pages/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Pages organization :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/cont/pages/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/cont/pages/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -417,18 +417,18 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/cont/syntaxhighlight/index.html b/cont/syntaxhighlight/index.html
index a3fa1d75d7..b6b5ac7e42 100644
--- a/cont/syntaxhighlight/index.html
+++ b/cont/syntaxhighlight/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Code highlighting :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/cont/syntaxhighlight/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -324,18 +324,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/cont/tags/index.html b/cont/tags/index.html
index 8f3e73f115..1c24c5d2f0 100644
--- a/cont/tags/index.html
+++ b/cont/tags/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Tags :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/cont/tags/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -300,18 +300,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/credits/index.html b/credits/index.html
index cf0d5f9a60..c3920fad68 100644
--- a/credits/index.html
+++ b/credits/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Credits :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/credits/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -284,18 +284,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/index.html b/index.html
index aa1fd6ba33..4ca244488f 100644
--- a/index.html
+++ b/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Relearn Theme for Hugo :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -289,18 +289,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/pir/404.html b/pir/404.html
index 5059ce0f1f..b3e4d05860 100644
--- a/pir/404.html
+++ b/pir/404.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>404 Page not found :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
     <style>
       p, li, ul {
         text-align: center
diff --git a/pir/basics/configuration/index.html b/pir/basics/configuration/index.html
index ce9f621376..f6e2316462 100644
--- a/pir/basics/configuration/index.html
+++ b/pir/basics/configuration/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Configurrrat&#39;n :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/basics/configuration/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/basics/configuration/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -383,18 +383,18 @@ default values:</p>
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/basics/customization/index.html b/pir/basics/customization/index.html
index baf7f4baa6..974388fbe0 100644
--- a/pir/basics/customization/index.html
+++ b/pir/basics/customization/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Customizat&#39;n :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/basics/customization/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/basics/customization/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -398,18 +398,18 @@ Ye could use an <code>img</code> HTML tag an' reference an image created under t
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/basics/history/index.html b/pir/basics/history/index.html
index 341c720bc8..2180382adb 100644
--- a/pir/basics/history/index.html
+++ b/pir/basics/history/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Historrry :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/basics/history/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/basics/history/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -573,18 +573,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/basics/index.html b/pir/basics/index.html
index f5b35794f8..7243dcc89e 100644
--- a/pir/basics/index.html
+++ b/pir/basics/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Basics :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/basics/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/basics/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -278,18 +278,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/basics/installation/index.html b/pir/basics/installation/index.html
index 179bfdaaba..5491ae1b96 100644
--- a/pir/basics/installation/index.html
+++ b/pir/basics/installation/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Installat&#39;n :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/basics/installation/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/basics/installation/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -334,18 +334,18 @@ hugo new basics/second-content/_index.md
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/basics/migration/index.html b/pir/basics/migration/index.html
index d3a05a798b..b118697d5f 100644
--- a/pir/basics/migration/index.html
+++ b/pir/basics/migration/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Migrrrat&#39;n :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/basics/migration/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/basics/migration/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -493,18 +493,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/basics/requirements/index.html b/pir/basics/requirements/index.html
index 33d56d3505..236cad145e 100644
--- a/pir/basics/requirements/index.html
+++ b/pir/basics/requirements/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Requirrrements :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/basics/requirements/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/basics/requirements/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -278,18 +278,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/categories/index.html b/pir/categories/index.html
index 74f3a521ae..6d4a9728eb 100644
--- a/pir/categories/index.html
+++ b/pir/categories/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Categories :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/categories/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/categories/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -267,18 +267,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/cont/archetypes/index.html b/pir/cont/archetypes/index.html
index d74dcc9e43..402d00b6db 100644
--- a/pir/cont/archetypes/index.html
+++ b/pir/cont/archetypes/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Arrrchetypes :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/cont/archetypes/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -310,18 +310,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/cont/i18n/index.html b/pir/cont/i18n/index.html
index 34d3a4834c..2e50146b7a 100644
--- a/pir/cont/i18n/index.html
+++ b/pir/cont/i18n/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Multilingual an&#39; i18n :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/cont/i18n/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/cont/i18n/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -339,18 +339,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/cont/icons/index.html b/pir/cont/icons/index.html
index 1da2e454a6..d344dc60ab 100644
--- a/pir/cont/icons/index.html
+++ b/pir/cont/icons/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Ay&#39;cons an&#39; logos :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/cont/icons/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -300,18 +300,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/cont/index.html b/pir/cont/index.html
index e41c075ffb..c029797687 100644
--- a/pir/cont/index.html
+++ b/pir/cont/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Rambl&#39;n :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/cont/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/cont/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -278,18 +278,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/cont/markdown/index.html b/pir/cont/markdown/index.html
index 335e8c34a3..cda8611d0d 100644
--- a/pir/cont/markdown/index.html
+++ b/pir/cont/markdown/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Marrrkdown rules :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/cont/markdown/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -769,18 +769,18 @@ grunt.initConfig({
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/cont/menushortcuts/index.html b/pir/cont/menushortcuts/index.html
index 18022c81f1..20482ca837 100644
--- a/pir/cont/menushortcuts/index.html
+++ b/pir/cont/menushortcuts/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Menu extrrra shorrrtcuts :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/cont/menushortcuts/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -388,18 +388,18 @@ However, if ye want t' keep th' title but change its value, it can be overriden
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/cont/pages/index.html b/pir/cont/pages/index.html
index ede3dd94fa..06f2da69f4 100644
--- a/pir/cont/pages/index.html
+++ b/pir/cont/pages/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Planks orrrganizat&#39;n :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/cont/pages/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/cont/pages/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -409,18 +409,18 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/cont/syntaxhighlight/index.html b/pir/cont/syntaxhighlight/index.html
index a7b70aba63..499cd30f1e 100644
--- a/pir/cont/syntaxhighlight/index.html
+++ b/pir/cont/syntaxhighlight/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Code highlight&#39;n :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/cont/syntaxhighlight/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -325,18 +325,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/cont/tags/index.html b/pir/cont/tags/index.html
index dec6d50ac8..6566a889ec 100644
--- a/pir/cont/tags/index.html
+++ b/pir/cont/tags/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Tags :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/cont/tags/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -301,18 +301,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/credits/index.html b/pir/credits/index.html
index 7ea982df91..63baca9885 100644
--- a/pir/credits/index.html
+++ b/pir/credits/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Crrredits :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/credits/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -291,18 +291,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/index.html b/pir/index.html
index 3152d691fd..c9f7cff0ad 100644
--- a/pir/index.html
+++ b/pir/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Relearrrn Theme fer Cap&#39;n Hugo :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -296,18 +296,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/attachments/index.html b/pir/shortcodes/attachments/index.html
index 965656c3ba..39c26aef36 100644
--- a/pir/shortcodes/attachments/index.html
+++ b/pir/shortcodes/attachments/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Attachments :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/attachments/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -461,18 +461,18 @@ Currently, it support two implementat'ns fer planks</p>
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/button/index.html b/pir/shortcodes/button/index.html
index 02eafc2c52..d8cb339194 100644
--- a/pir/shortcodes/button/index.html
+++ b/pir/shortcodes/button/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Button :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/button/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -301,18 +301,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></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 d23c68ec53..d1b38d43de 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
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 1-1-1-1-1-1 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/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.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/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/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -296,18 +296,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></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 e830e10ae5..44f6c462bc 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
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 1-1-1-1-1 (hidden) :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/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.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/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/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -301,18 +301,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></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 b04da5ca77..2b5214cea7 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
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 1-1-1-1 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -298,18 +298,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></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 6945d37a58..c80607bf05 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
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 1-1-1 (hidden) :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -297,18 +297,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></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 94605381f4..0f9fedefac 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
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 1-1-2-1 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -290,18 +290,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></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 4426a4697b..f2f4d22949 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
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 1-1-2-2 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -290,18 +290,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></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 7cb88783c9..3291e15896 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
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 1-1-2 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -296,18 +296,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></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 872fce73c3..2dc108132d 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
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 1-1-3 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -289,18 +289,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></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 c285e0c2f3..00778b4c9d 100644
--- a/pir/shortcodes/children/children-1/children-1-1/index.html
+++ b/pir/shortcodes/children/children-1/children-1-1/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 1-1 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -296,18 +296,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/index.html b/pir/shortcodes/children/children-1/index.html
index 1c1657affe..913e5cd6ab 100644
--- a/pir/shortcodes/children/children-1/index.html
+++ b/pir/shortcodes/children/children-1/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 1 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/children-1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -293,18 +293,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-2/index.html b/pir/shortcodes/children/children-2/index.html
index 67c36d5146..e2157388de 100644
--- a/pir/shortcodes/children/children-2/index.html
+++ b/pir/shortcodes/children/children-2/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 2 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/children/children-2/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/children-2/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -288,18 +288,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-3/index.html b/pir/shortcodes/children/children-3/index.html
index 77fb0a2ca6..40fc1c5e2a 100644
--- a/pir/shortcodes/children/children-3/index.html
+++ b/pir/shortcodes/children/children-3/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 3 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/children/children-3/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/children-3/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -293,18 +293,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-3/test3/index.html b/pir/shortcodes/children/children-3/test3/index.html
index bc84af2b37..8621c5640f 100644
--- a/pir/shortcodes/children/children-3/test3/index.html
+++ b/pir/shortcodes/children/children-3/test3/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Plank 3-1 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -287,18 +287,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-4/index.html b/pir/shortcodes/children/children-4/index.html
index b5b347bec0..429b0a226d 100644
--- a/pir/shortcodes/children/children-4/index.html
+++ b/pir/shortcodes/children/children-4/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 4 (hidden) :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/children/children-4/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/children-4/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -288,18 +288,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/index.html b/pir/shortcodes/children/index.html
index 5cf8b50b59..aaabf280c0 100644
--- a/pir/shortcodes/children/index.html
+++ b/pir/shortcodes/children/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Children :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/children/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -430,18 +430,18 @@ So its rrrambl'n be used as descript'n.</p>
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/test/index.html b/pir/shortcodes/children/test/index.html
index 7046d8f848..26f8b6e660 100644
--- a/pir/shortcodes/children/test/index.html
+++ b/pir/shortcodes/children/test/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Plank X :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/test/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -282,18 +282,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/expand/index.html b/pir/shortcodes/expand/index.html
index d775f6cca6..0530d77a93 100644
--- a/pir/shortcodes/expand/index.html
+++ b/pir/shortcodes/expand/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Expand :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/expand/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -409,18 +409,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/include/index.html b/pir/shortcodes/include/index.html
index 13b770709e..b4e0ea89fa 100644
--- a/pir/shortcodes/include/index.html
+++ b/pir/shortcodes/include/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Include :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/include/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -312,18 +312,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/index.html b/pir/shortcodes/index.html
index 73d8810e56..8d0a70d247 100644
--- a/pir/shortcodes/index.html
+++ b/pir/shortcodes/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Shorrrtcodes :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -321,18 +321,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/mermaid/index.html b/pir/shortcodes/mermaid/index.html
index f2e146e589..66b304a6a4 100644
--- a/pir/shortcodes/mermaid/index.html
+++ b/pir/shortcodes/mermaid/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Merrrmaid :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/mermaid/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -506,18 +506,18 @@ classDiagram
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/notice/index.html b/pir/shortcodes/notice/index.html
index 673129f830..6a817c547f 100644
--- a/pir/shortcodes/notice/index.html
+++ b/pir/shortcodes/notice/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Notice :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/notice/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -501,18 +501,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/siteparam/index.html b/pir/shortcodes/siteparam/index.html
index 23665cf7fa..0aef93fcc2 100644
--- a/pir/shortcodes/siteparam/index.html
+++ b/pir/shortcodes/siteparam/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Ship param :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/siteparam/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -292,18 +292,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/tabs/index.html b/pir/shortcodes/tabs/index.html
index d2da462c27..b6b9934bde 100644
--- a/pir/shortcodes/tabs/index.html
+++ b/pir/shortcodes/tabs/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Tabbed views :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/tabs/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -447,18 +447,18 @@ from th' <code>'default'</code> group on a different plank then all tabs will be
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/showcase/index.html b/pir/showcase/index.html
index a0156fd797..a4541519d7 100644
--- a/pir/showcase/index.html
+++ b/pir/showcase/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Showcase :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/showcase/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -274,18 +274,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/tags/children/index.html b/pir/tags/children/index.html
index c7ba5b1bee..6cb3c477c8 100644
--- a/pir/tags/children/index.html
+++ b/pir/tags/children/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>children :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/tags/children/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/tags/children/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -282,18 +282,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/tags/documentatn/index.html b/pir/tags/documentatn/index.html
index 2e562fc461..cc53e04d42 100644
--- a/pir/tags/documentatn/index.html
+++ b/pir/tags/documentatn/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>documentat&#39;n :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/tags/documentatn/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/tags/documentatn/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -268,18 +268,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/tags/hidden/index.html b/pir/tags/hidden/index.html
index bc68bb129f..ae3b756cc0 100644
--- a/pir/tags/hidden/index.html
+++ b/pir/tags/hidden/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>hidden :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/tags/hidden/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/tags/hidden/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -273,18 +273,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/tags/index.html b/pir/tags/index.html
index 7f4c820a57..a5b76d778d 100644
--- a/pir/tags/index.html
+++ b/pir/tags/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Tags :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/tags/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/tags/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -272,18 +272,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/tags/non-hidden/index.html b/pir/tags/non-hidden/index.html
index b8ca99d407..3f0f202b6b 100644
--- a/pir/tags/non-hidden/index.html
+++ b/pir/tags/non-hidden/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>non-hidden :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/tags/non-hidden/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/tags/non-hidden/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -277,18 +277,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/tags/tutorrrial/index.html b/pir/tags/tutorrrial/index.html
index 1c168cf7f1..538631b0ed 100644
--- a/pir/tags/tutorrrial/index.html
+++ b/pir/tags/tutorrrial/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>tutorrrial :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/tags/tutorrrial/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/tags/tutorrrial/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -268,18 +268,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/yours/1/index.html b/pir/yours/1/index.html
index 42820e973b..8163655196 100644
--- a/pir/yours/1/index.html
+++ b/pir/yours/1/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>1 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/yours/1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -284,18 +284,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/yours/10/index.html b/pir/yours/10/index.html
index ba91cbd80f..e2914fc31b 100644
--- a/pir/yours/10/index.html
+++ b/pir/yours/10/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>11 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/yours/10/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -284,18 +284,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/yours/2/index.html b/pir/yours/2/index.html
index 9e56953a95..6c07b9454d 100644
--- a/pir/yours/2/index.html
+++ b/pir/yours/2/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>2 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/yours/2/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -284,18 +284,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/yours/3/index.html b/pir/yours/3/index.html
index c88ed33c43..0237134bfd 100644
--- a/pir/yours/3/index.html
+++ b/pir/yours/3/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>3 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/yours/3/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -284,18 +284,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/yours/4/index.html b/pir/yours/4/index.html
index 6cf4720864..84d2c06567 100644
--- a/pir/yours/4/index.html
+++ b/pir/yours/4/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>4 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/yours/4/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -284,18 +284,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/yours/5/index.html b/pir/yours/5/index.html
index e6c311d8f3..7dc8ee93c2 100644
--- a/pir/yours/5/index.html
+++ b/pir/yours/5/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>5 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/yours/5/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -284,18 +284,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/yours/6/index.html b/pir/yours/6/index.html
index 163e526ed8..154d30003a 100644
--- a/pir/yours/6/index.html
+++ b/pir/yours/6/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>6 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/yours/6/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -284,18 +284,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/yours/7/index.html b/pir/yours/7/index.html
index a8d86e6ba8..84bb2bb809 100644
--- a/pir/yours/7/index.html
+++ b/pir/yours/7/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>7 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/yours/7/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -284,18 +284,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/yours/8/index.html b/pir/yours/8/index.html
index a43f0d3da3..95c0d3bd73 100644
--- a/pir/yours/8/index.html
+++ b/pir/yours/8/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>8 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/yours/8/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -284,18 +284,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/yours/9/index.html b/pir/yours/9/index.html
index dfe7d0f83a..f7b85537bc 100644
--- a/pir/yours/9/index.html
+++ b/pir/yours/9/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>9 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/yours/9/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -283,18 +283,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/yours/children-1/index.html b/pir/yours/children-1/index.html
index 990217ba5e..7f8eebf67a 100644
--- a/pir/yours/children-1/index.html
+++ b/pir/yours/children-1/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Th&#39; one an&#39; only hidden child :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/yours/children-1/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/yours/children-1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -293,18 +293,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/pir/yours/index.html b/pir/yours/index.html
index eeffbb2de7..096605ade1 100644
--- a/pir/yours/index.html
+++ b/pir/yours/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>This could be yers :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/yours/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885484" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885484" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885484" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885484" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885494" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885494" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885494" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885494" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885494"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/yours/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885484"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885484"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885494"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885494"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -289,18 +289,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885484"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885494"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885494"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885484"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885494"></script>
   </body>
 </html>
diff --git a/shortcodes/attachments/index.html b/shortcodes/attachments/index.html
index b5b0b7e4c7..c56d0135aa 100644
--- a/shortcodes/attachments/index.html
+++ b/shortcodes/attachments/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="The Attachments shortcode displays a list of files attached to a page">
     <meta name="author" content="Sören Weber">
     <title>Attachments :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/attachments/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -455,18 +455,18 @@ Currently, it support two implementations for pages</p>
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/shortcodes/button/index.html b/shortcodes/button/index.html
index 45d6daed84..4bd8e27d7f 100644
--- a/shortcodes/button/index.html
+++ b/shortcodes/button/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Nice buttons on your page">
     <meta name="author" content="Sören Weber">
     <title>Button :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/button/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -294,18 +294,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></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 1b7fadff88..ead6f8619d 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
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>page 1-1-1-1-1-1 :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/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.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/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/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -289,18 +289,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></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 180ec5e035..62f35b3315 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
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>page 1-1-1-1-1 (hidden) :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/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.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/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/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -298,18 +298,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></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 fec0a3bf7a..9e9232d112 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
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>page 1-1-1-1 :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -295,18 +295,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></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 d9801cbd3f..292dc67610 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
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>page 1-1-1 (hidden) :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -294,18 +294,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></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 2247871b8f..32253f68aa 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
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>page 1-1-2-1 :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -283,18 +283,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></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 f918352748..98f224a38e 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
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>page 1-1-2-2 :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -283,18 +283,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></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 357e5b6229..1226e714bf 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
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>page 1-1-2 :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -293,18 +293,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></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 d503d30bfa..5cd32124da 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
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>page 1-1-3 :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-3/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-3/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -282,18 +282,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></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 f758a30b92..2c928fdaba 100644
--- a/shortcodes/children/children-1/children-1-1/index.html
+++ b/shortcodes/children/children-1/children-1-1/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>page 1-1 :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -293,18 +293,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/index.html b/shortcodes/children/children-1/index.html
index 5b96488ee2..b87ea817c4 100644
--- a/shortcodes/children/children-1/index.html
+++ b/shortcodes/children/children-1/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>page 1 :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/children/children-1/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/children-1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -290,18 +290,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-2/index.html b/shortcodes/children/children-2/index.html
index 16de76fb5a..c10f6f5189 100644
--- a/shortcodes/children/children-2/index.html
+++ b/shortcodes/children/children-2/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>page 2 :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/children/children-2/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/children-2/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -281,18 +281,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-3/index.html b/shortcodes/children/children-3/index.html
index bee430a564..8c7ab36760 100644
--- a/shortcodes/children/children-3/index.html
+++ b/shortcodes/children/children-3/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>page 3 :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/children/children-3/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/children-3/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -290,18 +290,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-3/test3/index.html b/shortcodes/children/children-3/test3/index.html
index ba6fabd65f..6b5b98f983 100644
--- a/shortcodes/children/children-3/test3/index.html
+++ b/shortcodes/children/children-3/test3/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="This is a plain page test nested in a parent">
     <meta name="author" content="Sören Weber">
     <title>page 3-1 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/children-3/test3/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -280,18 +280,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-4/index.html b/shortcodes/children/children-4/index.html
index 3efd4bb198..435e816e49 100644
--- a/shortcodes/children/children-4/index.html
+++ b/shortcodes/children/children-4/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>page 4 (hidden) :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/children/children-4/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/children-4/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -281,18 +281,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/shortcodes/children/index.html b/shortcodes/children/index.html
index f90043e8bb..3045408657 100644
--- a/shortcodes/children/index.html
+++ b/shortcodes/children/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Children :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/children/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -428,18 +428,18 @@ So its content is used as description.</p>
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/shortcodes/children/test/index.html b/shortcodes/children/test/index.html
index b5cf98da6e..599bb30af0 100644
--- a/shortcodes/children/test/index.html
+++ b/shortcodes/children/test/index.html
@@ -9,21 +9,21 @@
 ">
     <meta name="author" content="Sören Weber">
     <title>page X :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/test/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -276,18 +276,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/shortcodes/expand/index.html b/shortcodes/expand/index.html
index 878255d192..bf3937aff1 100644
--- a/shortcodes/expand/index.html
+++ b/shortcodes/expand/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Displays an expandable/collapsible section of text on your page">
     <meta name="author" content="Sören Weber">
     <title>Expand :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/expand/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -413,18 +413,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/shortcodes/include/index.html b/shortcodes/include/index.html
index 2cc9ca6a9c..6d414fd4c1 100644
--- a/shortcodes/include/index.html
+++ b/shortcodes/include/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Displays content from other Markdown files">
     <meta name="author" content="Sören Weber">
     <title>Include :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/include/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -314,18 +314,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/shortcodes/include_me/index.html b/shortcodes/include_me/index.html
index 603fa26ffc..2fa05b31c4 100644
--- a/shortcodes/include_me/index.html
+++ b/shortcodes/include_me/index.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title> :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/include_me/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -287,18 +287,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/shortcodes/index.html b/shortcodes/index.html
index 7634635398..7d5d9ec77d 100644
--- a/shortcodes/index.html
+++ b/shortcodes/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Shortcodes :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -314,18 +314,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/shortcodes/mermaid/index.html b/shortcodes/mermaid/index.html
index e55b8b8d1b..cd4cd61fb0 100644
--- a/shortcodes/mermaid/index.html
+++ b/shortcodes/mermaid/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Generation of diagram and flowchart from text in a similar manner as Markdown">
     <meta name="author" content="Sören Weber">
     <title>Mermaid :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/mermaid/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -517,18 +517,18 @@ classDiagram
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/shortcodes/notice/index.html b/shortcodes/notice/index.html
index 3ffd77f4f9..0f95dacd6e 100644
--- a/shortcodes/notice/index.html
+++ b/shortcodes/notice/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Disclaimers to help you structure your page">
     <meta name="author" content="Sören Weber">
     <title>Notice :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/notice/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -507,18 +507,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/shortcodes/siteparam/index.html b/shortcodes/siteparam/index.html
index b07d1bc037..948ab4d42e 100644
--- a/shortcodes/siteparam/index.html
+++ b/shortcodes/siteparam/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Get value of site params variables in your page">
     <meta name="author" content="Sören Weber">
     <title>Site param :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/siteparam/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -290,18 +290,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/shortcodes/tabs/index.html b/shortcodes/tabs/index.html
index 9d6d1a6072..b2a1908e87 100644
--- a/shortcodes/tabs/index.html
+++ b/shortcodes/tabs/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Synchronize selection of content in different tabbed views">
     <meta name="author" content="Sören Weber">
     <title>Tabbed views :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/tabs/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -445,18 +445,18 @@ from the <code>'default'</code> group on a different page then all tabs will be
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/showcase/index.html b/showcase/index.html
index 39a614051d..02b60f21d1 100644
--- a/showcase/index.html
+++ b/showcase/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Showcase :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/showcase/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -267,18 +267,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/tags/children/index.html b/tags/children/index.html
index b035e74739..2a6b2e36f1 100644
--- a/tags/children/index.html
+++ b/tags/children/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>children :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/tags/children/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/tags/children/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -282,18 +282,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/tags/documentation/index.html b/tags/documentation/index.html
index 4b989dfb2a..a0aceaf488 100644
--- a/tags/documentation/index.html
+++ b/tags/documentation/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>documentation :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/tags/documentation/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/tags/documentation/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -268,18 +268,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/tags/hidden/index.html b/tags/hidden/index.html
index f3deb1b416..39dbe36f5c 100644
--- a/tags/hidden/index.html
+++ b/tags/hidden/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>hidden :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/tags/hidden/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/tags/hidden/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -273,18 +273,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/tags/index.html b/tags/index.html
index 6d9333c45b..ffe0d70e65 100644
--- a/tags/index.html
+++ b/tags/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>Tags :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/tags/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/tags/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -272,18 +272,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/tags/non-hidden/index.html b/tags/non-hidden/index.html
index 2f11358992..b68341ad06 100644
--- a/tags/non-hidden/index.html
+++ b/tags/non-hidden/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>non-hidden :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/tags/non-hidden/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/tags/non-hidden/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -277,18 +277,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/tags/tutorial/index.html b/tags/tutorial/index.html
index ed603ee8af..dec44071e7 100644
--- a/tags/tutorial/index.html
+++ b/tags/tutorial/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>tutorial :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/tags/tutorial/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/tags/tutorial/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -268,18 +268,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/1/index.html b/yours/1/index.html
index 65e6828648..011c2ef2fc 100644
--- a/yours/1/index.html
+++ b/yours/1/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>1 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -304,18 +304,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/10/index.html b/yours/10/index.html
index 26a56a4ace..4ad46633c5 100644
--- a/yours/10/index.html
+++ b/yours/10/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>10 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/10/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -304,18 +304,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/11.de/index.html b/yours/11.de/index.html
index 00c2e1e744..f7aad2060f 100644
--- a/yours/11.de/index.html
+++ b/yours/11.de/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>11 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/11.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -303,18 +303,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/12.de/index.html b/yours/12.de/index.html
index d433c2b577..48ac1ca857 100644
--- a/yours/12.de/index.html
+++ b/yours/12.de/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>12 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/12.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -303,18 +303,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/13.de/index.html b/yours/13.de/index.html
index 465970bc7d..cab1c2c050 100644
--- a/yours/13.de/index.html
+++ b/yours/13.de/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>13 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/13.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -303,18 +303,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/14.de/index.html b/yours/14.de/index.html
index a928136f1a..11694a5545 100644
--- a/yours/14.de/index.html
+++ b/yours/14.de/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>14 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/14.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -303,18 +303,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/15.de/index.html b/yours/15.de/index.html
index 3932fa562f..74006e2f31 100644
--- a/yours/15.de/index.html
+++ b/yours/15.de/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>15 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/15.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -303,18 +303,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885482"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/16.de/index.html b/yours/16.de/index.html
index 18abccfa05..e1a616015a 100644
--- a/yours/16.de/index.html
+++ b/yours/16.de/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>16 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/16.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -303,18 +303,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/17.de/index.html b/yours/17.de/index.html
index e7e825df77..c7085f4f54 100644
--- a/yours/17.de/index.html
+++ b/yours/17.de/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>17 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885482" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885482" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885482" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885482" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885482"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/17.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885482"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885482"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -303,18 +303,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/18.de/index.html b/yours/18.de/index.html
index 7b4a0f4011..bdf69013b9 100644
--- a/yours/18.de/index.html
+++ b/yours/18.de/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>18 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/18.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -303,18 +303,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/19.de/index.html b/yours/19.de/index.html
index cfaf3e1766..0ce5794dfd 100644
--- a/yours/19.de/index.html
+++ b/yours/19.de/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>19 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/19.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -303,18 +303,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/2/index.html b/yours/2/index.html
index 891fc3693e..7f14df03c5 100644
--- a/yours/2/index.html
+++ b/yours/2/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>2 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/2/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -304,18 +304,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/20.de/index.html b/yours/20.de/index.html
index c6e1f224a7..b5afd362d3 100644
--- a/yours/20.de/index.html
+++ b/yours/20.de/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>20 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/20.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -303,18 +303,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/21.de/index.html b/yours/21.de/index.html
index 88795412cd..7e462dc295 100644
--- a/yours/21.de/index.html
+++ b/yours/21.de/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>21 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/21.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -303,18 +303,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/22.de/index.html b/yours/22.de/index.html
index 0c8cf5f73f..71947602b6 100644
--- a/yours/22.de/index.html
+++ b/yours/22.de/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>22 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/22.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -303,18 +303,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/23.de/index.html b/yours/23.de/index.html
index 20f699206c..2095e3781a 100644
--- a/yours/23.de/index.html
+++ b/yours/23.de/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>23 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/23.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -303,18 +303,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/24.de/index.html b/yours/24.de/index.html
index 9994e908d3..cac785aebb 100644
--- a/yours/24.de/index.html
+++ b/yours/24.de/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>24 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/24.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -303,18 +303,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/25.de/index.html b/yours/25.de/index.html
index 9a0fac407a..6c1d156f09 100644
--- a/yours/25.de/index.html
+++ b/yours/25.de/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>25 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/25.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -303,18 +303,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/26.de/index.html b/yours/26.de/index.html
index c1ad1fdbf9..856ab45fda 100644
--- a/yours/26.de/index.html
+++ b/yours/26.de/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>26 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/26.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -303,18 +303,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/27.de/index.html b/yours/27.de/index.html
index e6e8a55826..acc6bbf500 100644
--- a/yours/27.de/index.html
+++ b/yours/27.de/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>27 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/27.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -303,18 +303,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/28.de/index.html b/yours/28.de/index.html
index 393cda5cbf..3227e50d02 100644
--- a/yours/28.de/index.html
+++ b/yours/28.de/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>28 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/28.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -303,18 +303,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/29.de/index.html b/yours/29.de/index.html
index 161da5d112..b8ee89f37a 100644
--- a/yours/29.de/index.html
+++ b/yours/29.de/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>29 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/29.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -303,18 +303,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/3/index.html b/yours/3/index.html
index 00fa91959d..8703a946cf 100644
--- a/yours/3/index.html
+++ b/yours/3/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>3 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/3/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -304,18 +304,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/30.de/index.html b/yours/30.de/index.html
index 192f221e9e..586f73ce5a 100644
--- a/yours/30.de/index.html
+++ b/yours/30.de/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>30 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/30.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -303,18 +303,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/4/index.html b/yours/4/index.html
index 10a4010e4f..9e68de501f 100644
--- a/yours/4/index.html
+++ b/yours/4/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>4 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/4/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -304,18 +304,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/5/index.html b/yours/5/index.html
index c2c806088d..81f342096b 100644
--- a/yours/5/index.html
+++ b/yours/5/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>5 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/5/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -304,18 +304,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/6/index.html b/yours/6/index.html
index 10e7362686..71752ea1d2 100644
--- a/yours/6/index.html
+++ b/yours/6/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>6 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/6/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -304,18 +304,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/7/index.html b/yours/7/index.html
index 0e61180f0a..a7bd04e968 100644
--- a/yours/7/index.html
+++ b/yours/7/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>7 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/7/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -304,18 +304,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/8/index.html b/yours/8/index.html
index 0212139da7..a9e0e89ca5 100644
--- a/yours/8/index.html
+++ b/yours/8/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>8 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/8/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -304,18 +304,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/9/index.html b/yours/9/index.html
index 0395eb663a..3ab3b316c2 100644
--- a/yours/9/index.html
+++ b/yours/9/index.html
@@ -8,21 +8,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>9 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -43,7 +43,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -59,16 +59,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/9/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -111,9 +111,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -303,18 +303,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/children-1/index.html b/yours/children-1/index.html
index 17aebe1993..d924a6b629 100644
--- a/yours/children-1/index.html
+++ b/yours/children-1/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>The one and only hidden child :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/yours/children-1/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/children-1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -306,18 +306,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>
diff --git a/yours/index.html b/yours/index.html
index 35793f2041..46741b3b12 100644
--- a/yours/index.html
+++ b/yours/index.html
@@ -9,21 +9,21 @@
     <meta name="author" content="Sören Weber">
     <title>This could be yours :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/yours/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885483" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644885483" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644885483" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644885483" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644885493" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644885493" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644885493" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644885493" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
-      
-      
+      // we need to define this script in the head to avoid flickering
+      // on page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
       changeTheme( theme );
       function getTheme(){
@@ -44,7 +44,7 @@
       }
       function changeTheme( theme ){
         var themes = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ];
-        if( !themes.find( function(e){ return e==theme; } ) ){
+        if( themes.indexOf( theme ) < 0 ){
           theme = themes.length ? themes[ 0 ] : null;
         }
         if( !theme ){
@@ -60,16 +60,16 @@
           window.localStorage.setItem( 'theme', theme );
           link.setAttribute( 'href', new_path );
           markTheme( theme );
-          
-          
-          
+          // remove selection, because if some uses an arrow navigation
+          // by pressing the left or right cursor key, we will automatically
+          // select a different style
           if( document.activeElement ){
             document.activeElement.blur();
           }
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644885493"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -112,9 +112,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885483"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644885483"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644885493"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644885493"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -302,18 +302,18 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885483"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644885493"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644885493"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
       }
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1644885483"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644885493"></script>
   </body>
 </html>