diff --git a/404.html b/404.html
index 59c0e440d6..736657b0c0 100644
--- a/404.html
+++ b/404.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></script>
     <style>
       p, li, ul {
         text-align: center
diff --git a/basics/changelog/index.html b/basics/changelog/index.html
index 9e1db704e1..718e18dbe2 100644
--- a/basics/changelog/index.html
+++ b/basics/changelog/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867286" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867286" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867286" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867286"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867286"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867286"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867286"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item parent"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -167,7 +167,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="en" value="/hugo-theme-relearn/basics/changelog/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -716,18 +723,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867286"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867286"></script>
   </body>
 </html>
diff --git a/basics/configuration/index.html b/basics/configuration/index.html
index 6b546e0788..0b6e73c419 100644
--- a/basics/configuration/index.html
+++ b/basics/configuration/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item parent"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/basics/configuration/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -378,18 +385,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/basics/customization/index.html b/basics/customization/index.html
index 8e778310ae..fc88405f15 100644
--- a/basics/customization/index.html
+++ b/basics/customization/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item parent"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="en" value="/hugo-theme-relearn/basics/customization/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -385,18 +392,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/basics/history/index.html b/basics/history/index.html
index 2fca7974ed..6f95444cda 100644
--- a/basics/history/index.html
+++ b/basics/history/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item parent"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="en" value="/hugo-theme-relearn/basics/history/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -718,18 +725,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/basics/index.html b/basics/index.html
index de51f82dbe..1d4445f3a9 100644
--- a/basics/index.html
+++ b/basics/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item active parent"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/basics/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -265,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/basics/installation/index.html b/basics/installation/index.html
index 8c817cc308..42c78a8691 100644
--- a/basics/installation/index.html
+++ b/basics/installation/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item parent"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="en" value="/hugo-theme-relearn/basics/installation/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -331,18 +338,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/basics/migration/index.html b/basics/migration/index.html
index e5faeb0fcb..0512e992e2 100644
--- a/basics/migration/index.html
+++ b/basics/migration/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item parent"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item active parent alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="en" value="/hugo-theme-relearn/basics/migration/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -482,18 +489,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/basics/requirements/index.html b/basics/requirements/index.html
index fd4df61478..0023aaf7ed 100644
--- a/basics/requirements/index.html
+++ b/basics/requirements/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item parent"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/basics/requirements/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -265,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/categories/index.html b/categories/index.html
index 45638bd297..4eebeb05a2 100644
--- a/categories/index.html
+++ b/categories/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/categories/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -260,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/cont/archetypes/index.html b/cont/archetypes/index.html
index 655464bc3c..a120294f73 100644
--- a/cont/archetypes/index.html
+++ b/cont/archetypes/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867286" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867286" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867286" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867286"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867286"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867286"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867286"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/cont/archetypes/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -302,18 +309,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867286"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867286"></script>
   </body>
 </html>
diff --git a/cont/i18n/index.html b/cont/i18n/index.html
index 443baca55f..07b4b38323 100644
--- a/cont/i18n/index.html
+++ b/cont/i18n/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="en" value="/hugo-theme-relearn/cont/i18n/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -332,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/cont/icons/index.html b/cont/icons/index.html
index cf9095709f..e76d9524f2 100644
--- a/cont/icons/index.html
+++ b/cont/icons/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867286" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867286" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867286" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867286"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867286"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867286"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867286"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="en" value="/hugo-theme-relearn/cont/icons/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -293,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867286"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867286"></script>
   </body>
 </html>
diff --git a/cont/index.html b/cont/index.html
index 7d06aac15b..cfc56fd34d 100644
--- a/cont/index.html
+++ b/cont/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/cont/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -265,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/cont/markdown/index.html b/cont/markdown/index.html
index 097e7e3797..94b2e9187e 100644
--- a/cont/markdown/index.html
+++ b/cont/markdown/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867286" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867286" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867286" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867286"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867286"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867286"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867286"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/cont/markdown/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -812,18 +819,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867286"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867286"></script>
   </body>
 </html>
diff --git a/cont/menushortcuts/index.html b/cont/menushortcuts/index.html
index 3be6bef530..3cf42ca299 100644
--- a/cont/menushortcuts/index.html
+++ b/cont/menushortcuts/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867286" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867286" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867286" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867286"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867286"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867286"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867286"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/cont/menushortcuts/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -380,18 +387,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867286"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867286"></script>
   </body>
 </html>
diff --git a/cont/pages/index.html b/cont/pages/index.html
index 0bd57963f6..885ecdd21e 100644
--- a/cont/pages/index.html
+++ b/cont/pages/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/cont/pages/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -411,18 +418,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/cont/syntaxhighlight/index.html b/cont/syntaxhighlight/index.html
index e272f8f348..c9dbf1ae4c 100644
--- a/cont/syntaxhighlight/index.html
+++ b/cont/syntaxhighlight/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867286" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867286" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867286" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867286"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867286"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867286"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867286"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="en" value="/hugo-theme-relearn/cont/syntaxhighlight/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -318,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867286"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867286"></script>
   </body>
 </html>
diff --git a/cont/tags/index.html b/cont/tags/index.html
index 3991e960af..09f7fcdd4c 100644
--- a/cont/tags/index.html
+++ b/cont/tags/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867286" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867286" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867286" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867286"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867286"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867286"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867286"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/cont/tags/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -294,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867286"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867286"></script>
   </body>
 </html>
diff --git a/credits/index.html b/credits/index.html
index 57cf68128c..f160932f25 100644
--- a/credits/index.html
+++ b/credits/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867286" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867286" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867286" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867286"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867286"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867286"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867286"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/credits/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -278,18 +285,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867286"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867286"></script>
   </body>
 </html>
diff --git a/css/theme.css b/css/theme.css
index 0ec7e17c78..a6050c8e78 100644
--- a/css/theme.css
+++ b/css/theme.css
@@ -88,6 +88,19 @@ th {
     transition: all 0.5s ease;
 }
 
+#sidebar {
+    background-color: #322A38; /* var(--MENU-SECTIONS-BG-color) */
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    font-size: 15.25px;
+    left: 0;
+    line-height: 1.574;
+    position: fixed;
+    top: 0;
+    width: 300px;
+}
+
 #header-wrapper {
     background-color: #8451a1; /* var(--MENU-HEADER-BG-color) */
     color: #ffffff; /* var(--MENU-SEARCH-color) */
@@ -147,24 +160,11 @@ th {
     color: rgba( 255, 255, 255, .4 );
 }
 
-#sidebar-toggle-span {
-    display: none;
-}
-@media only all and (max-width: 47.938em) {
-    #sidebar-toggle-span {
-        display: inline;
-    }
-}
-
-#sidebar {
-    background-color: #322A38; /* var(--MENU-SECTIONS-BG-color) */
-    bottom: 0;
-    font-size: 15.25px;
-    left: 0;
-    line-height: 1.574;
-    position: fixed;
-    top: 0;
-    width: 300px;
+#content-wrapper {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    overflow: hidden;
 }
 
 #sidebar a {
@@ -888,12 +888,6 @@ td {
     position: relative;
 }
 
-#sidebar .highlightable {
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-}
-
 .lightbox-active #body {
     overflow: visible;
 }
@@ -957,6 +951,15 @@ td {
     width: 70%;
 }
 
+#sidebar-toggle-span {
+    display: none;
+}
+@media only all and (max-width: 47.938em) {
+    #sidebar-toggle-span {
+        display: inline;
+    }
+}
+
 #body #breadcrumbs span {
     padding: 0 0.1rem;
 }
@@ -1427,6 +1430,10 @@ h6 a {
     margin: 0;
 }
 
+.select-clear {
+    clear: both;
+}
+
 @media only all and (max-width: 47.938em) {
   #breadcrumbs .links, #top-github-link-text {
       display: none;
diff --git a/css/variant.css b/css/variant.css
index 09aaec5616..6b48a9c176 100644
--- a/css/variant.css
+++ b/css/variant.css
@@ -14,6 +14,10 @@ a:hover,
     color: var(--MAIN-LINK-HOVER-color);
 }
 
+#sidebar {
+    background-color: var(--MENU-SECTIONS-BG-color);
+}
+
 #header-wrapper {
     background-color: var(--MENU-HEADER-BG-color);
     color: var(--MENU-SEARCH-color, #ffffff);
@@ -25,10 +29,6 @@ a:hover,
     background-color: var(--MENU-SEARCH-BG-color);
 }
 
-#sidebar {
-    background-color: var(--MENU-SECTIONS-BG-color);
-}
-
 #sidebar a {
     color: var(--MENU-SECTIONS-LINK-color);
 }
@@ -44,7 +44,8 @@ a:hover,
 
 #sidebar ul li.active > a {
     background-color: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color);
-    color: var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important;
+    color: var(--
+    );
 }
 
 #sidebar ul li.visited > a .read-icon {
diff --git a/index.html b/index.html
index 6a87e5a0d3..37367b0e1b 100644
--- a/index.html
+++ b/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -280,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/pir/404.html b/pir/404.html
index fe779e31d9..c0ea15f599 100644
--- a/pir/404.html
+++ b/pir/404.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></script>
     <style>
       p, li, ul {
         text-align: center
diff --git a/pir/basics/configuration/index.html b/pir/basics/configuration/index.html
index 736be5a5e1..0b4cdce400 100644
--- a/pir/basics/configuration/index.html
+++ b/pir/basics/configuration/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item parent"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/basics/configuration/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -377,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/basics/customization/index.html b/pir/basics/customization/index.html
index 70cbf4f4bd..f466e884e7 100644
--- a/pir/basics/customization/index.html
+++ b/pir/basics/customization/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item parent"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="en" value="/hugo-theme-relearn/basics/customization/">English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -377,18 +384,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/basics/history/index.html b/pir/basics/history/index.html
index 322b380206..5acbff8ce7 100644
--- a/pir/basics/history/index.html
+++ b/pir/basics/history/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item parent"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="en" value="/hugo-theme-relearn/basics/history/">English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -567,18 +574,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/basics/index.html b/pir/basics/index.html
index 4c065d5c5d..95dd033225 100644
--- a/pir/basics/index.html
+++ b/pir/basics/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item active parent"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/basics/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -272,18 +279,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/basics/installation/index.html b/pir/basics/installation/index.html
index 4a1edfa175..938ad470e5 100644
--- a/pir/basics/installation/index.html
+++ b/pir/basics/installation/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item parent"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="en" value="/hugo-theme-relearn/basics/installation/">English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -328,18 +335,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/basics/migration/index.html b/pir/basics/migration/index.html
index 46a148fe1f..e57e3c1202 100644
--- a/pir/basics/migration/index.html
+++ b/pir/basics/migration/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item parent"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="en" value="/hugo-theme-relearn/basics/migration/">English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -474,18 +481,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/basics/requirements/index.html b/pir/basics/requirements/index.html
index 3ed1a0c7ad..4f6d6dfbb1 100644
--- a/pir/basics/requirements/index.html
+++ b/pir/basics/requirements/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item parent"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item active parent alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/basics/requirements/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -272,18 +279,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/categories/index.html b/pir/categories/index.html
index f432681ca9..e1152b72e5 100644
--- a/pir/categories/index.html
+++ b/pir/categories/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/categories/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -260,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/cont/archetypes/index.html b/pir/cont/archetypes/index.html
index e94e0965b6..83991b7a48 100644
--- a/pir/cont/archetypes/index.html
+++ b/pir/cont/archetypes/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/cont/archetypes/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -304,18 +311,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/pir/cont/i18n/index.html b/pir/cont/i18n/index.html
index 301f65ac92..73f760b4ec 100644
--- a/pir/cont/i18n/index.html
+++ b/pir/cont/i18n/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="en" value="/hugo-theme-relearn/cont/i18n/">English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -333,18 +340,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/cont/icons/index.html b/pir/cont/icons/index.html
index 205a6e6471..fe9840e9d9 100644
--- a/pir/cont/icons/index.html
+++ b/pir/cont/icons/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="en" value="/hugo-theme-relearn/cont/icons/">English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -294,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/pir/cont/index.html b/pir/cont/index.html
index c79e4b05fc..293baf433c 100644
--- a/pir/cont/index.html
+++ b/pir/cont/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/cont/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -272,18 +279,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/cont/markdown/index.html b/pir/cont/markdown/index.html
index 3125b786b7..400a1c54c0 100644
--- a/pir/cont/markdown/index.html
+++ b/pir/cont/markdown/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/cont/markdown/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -763,18 +770,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/cont/menushortcuts/index.html b/pir/cont/menushortcuts/index.html
index 2dd9bc1443..9f503c9df7 100644
--- a/pir/cont/menushortcuts/index.html
+++ b/pir/cont/menushortcuts/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/cont/menushortcuts/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -382,18 +389,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/pir/cont/pages/index.html b/pir/cont/pages/index.html
index 384b69ed99..f42491e64f 100644
--- a/pir/cont/pages/index.html
+++ b/pir/cont/pages/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/cont/pages/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -403,18 +410,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/cont/syntaxhighlight/index.html b/pir/cont/syntaxhighlight/index.html
index b252f954fd..2febeadd18 100644
--- a/pir/cont/syntaxhighlight/index.html
+++ b/pir/cont/syntaxhighlight/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="en" value="/hugo-theme-relearn/cont/syntaxhighlight/">English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -319,18 +326,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/pir/cont/tags/index.html b/pir/cont/tags/index.html
index b96a9ce7ce..02809a0760 100644
--- a/pir/cont/tags/index.html
+++ b/pir/cont/tags/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/cont/tags/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -295,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/pir/credits/index.html b/pir/credits/index.html
index 8882afbee0..f47e9c7983 100644
--- a/pir/credits/index.html
+++ b/pir/credits/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/credits/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -285,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/pir/index.html b/pir/index.html
index 507da5dcbb..4f80b4ceb6 100644
--- a/pir/index.html
+++ b/pir/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -287,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/attachments/index.html b/pir/shortcodes/attachments/index.html
index ec301f472b..bb1b7de505 100644
--- a/pir/shortcodes/attachments/index.html
+++ b/pir/shortcodes/attachments/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/attachments/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -455,18 +462,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/button/index.html b/pir/shortcodes/button/index.html
index a0f7a56986..cc8f380b30 100644
--- a/pir/shortcodes/button/index.html
+++ b/pir/shortcodes/button/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/button/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -295,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></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 e4adb2c336..1a61af1021 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,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -170,7 +170,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -183,6 +183,7 @@
                     <option id="pir" value="/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/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -198,9 +199,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -209,8 +211,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -290,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></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 b673a93892..38249827c8 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,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -170,7 +170,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -183,6 +183,7 @@
                     <option id="pir" value="/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/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -198,9 +199,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -209,8 +211,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -295,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></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 f484eb68e4..6d57326e57 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,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -168,7 +168,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -181,6 +181,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -196,9 +197,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -207,8 +209,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -292,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></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 d539d1eceb..197d97cb26 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,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -168,7 +168,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -181,6 +181,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -196,9 +197,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -207,8 +209,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -291,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></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 36829ea49f..db881807c0 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,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -284,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></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 a39482ac5e..4b009d7601 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,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -284,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></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 1c3cc3b4f7..b6bd24f34b 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,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -290,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></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 7469c80791..7768b1019f 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,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -283,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></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 f76a7a32bf..58e217b150 100644
--- a/pir/shortcodes/children/children-1/children-1-1/index.html
+++ b/pir/shortcodes/children/children-1/children-1-1/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -290,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/index.html b/pir/shortcodes/children/children-1/index.html
index e855e3072a..e60582e5b1 100644
--- a/pir/shortcodes/children/children-1/index.html
+++ b/pir/shortcodes/children/children-1/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/children-1/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -287,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-2/index.html b/pir/shortcodes/children/children-2/index.html
index f8f09884f3..22c94e4aa5 100644
--- a/pir/shortcodes/children/children-2/index.html
+++ b/pir/shortcodes/children/children-2/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/children-2/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -282,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-3/index.html b/pir/shortcodes/children/children-3/index.html
index 11bdd779d6..0e56ebad7a 100644
--- a/pir/shortcodes/children/children-3/index.html
+++ b/pir/shortcodes/children/children-3/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/children-3/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -287,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-3/test3/index.html b/pir/shortcodes/children/children-3/test3/index.html
index dc92942b05..a99e9b071a 100644
--- a/pir/shortcodes/children/children-3/test3/index.html
+++ b/pir/shortcodes/children/children-3/test3/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -281,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-4/index.html b/pir/shortcodes/children/children-4/index.html
index 45e01f6743..6509cb49a8 100644
--- a/pir/shortcodes/children/children-4/index.html
+++ b/pir/shortcodes/children/children-4/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -167,7 +167,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -180,6 +180,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/children-4/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -195,9 +196,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -206,8 +208,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -282,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/index.html b/pir/shortcodes/children/index.html
index ae1145842f..af9366d78a 100644
--- a/pir/shortcodes/children/index.html
+++ b/pir/shortcodes/children/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -424,18 +431,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/test/index.html b/pir/shortcodes/children/test/index.html
index 70d68d0cd7..6ee0b1a0dc 100644
--- a/pir/shortcodes/children/test/index.html
+++ b/pir/shortcodes/children/test/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/test/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -276,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/expand/index.html b/pir/shortcodes/expand/index.html
index 0845b097eb..78f20083f8 100644
--- a/pir/shortcodes/expand/index.html
+++ b/pir/shortcodes/expand/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/expand/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -403,18 +410,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/include/index.html b/pir/shortcodes/include/index.html
index b8f95b9b39..6c330ff83e 100644
--- a/pir/shortcodes/include/index.html
+++ b/pir/shortcodes/include/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/include/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -306,18 +313,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/index.html b/pir/shortcodes/index.html
index 35ccf608d7..f56cde6b7b 100644
--- a/pir/shortcodes/index.html
+++ b/pir/shortcodes/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="en" value="/hugo-theme-relearn/shortcodes/">English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -315,18 +322,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/mermaid/index.html b/pir/shortcodes/mermaid/index.html
index ef9f7d3f22..eff638166b 100644
--- a/pir/shortcodes/mermaid/index.html
+++ b/pir/shortcodes/mermaid/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/mermaid/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -500,18 +507,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/notice/index.html b/pir/shortcodes/notice/index.html
index 18fe4784fc..b0d830f805 100644
--- a/pir/shortcodes/notice/index.html
+++ b/pir/shortcodes/notice/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/notice/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -495,18 +502,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/siteparam/index.html b/pir/shortcodes/siteparam/index.html
index f688f739cf..afdfbe46fe 100644
--- a/pir/shortcodes/siteparam/index.html
+++ b/pir/shortcodes/siteparam/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="en" value="/hugo-theme-relearn/shortcodes/siteparam/">English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -286,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/tabs/index.html b/pir/shortcodes/tabs/index.html
index 2343e54d4e..d508e527ab 100644
--- a/pir/shortcodes/tabs/index.html
+++ b/pir/shortcodes/tabs/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/tabs/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -441,18 +448,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/showcase/index.html b/pir/showcase/index.html
index 1098e90912..a02b8c5eab 100644
--- a/pir/showcase/index.html
+++ b/pir/showcase/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/showcase/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -268,18 +275,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/pir/tags/children/index.html b/pir/tags/children/index.html
index e3d4bcf286..cf49b9b0c5 100644
--- a/pir/tags/children/index.html
+++ b/pir/tags/children/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/tags/children/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -275,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/tags/documentatn/index.html b/pir/tags/documentatn/index.html
index 543a7d5081..3bd4fd8d0d 100644
--- a/pir/tags/documentatn/index.html
+++ b/pir/tags/documentatn/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/tags/documentatn/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -261,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/tags/hidden/index.html b/pir/tags/hidden/index.html
index cb262ac96d..bd1f44d0fa 100644
--- a/pir/tags/hidden/index.html
+++ b/pir/tags/hidden/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/tags/hidden/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -266,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/tags/index.html b/pir/tags/index.html
index def5c37077..e34cf3ddfe 100644
--- a/pir/tags/index.html
+++ b/pir/tags/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/tags/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -265,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/tags/non-hidden/index.html b/pir/tags/non-hidden/index.html
index 434e1b2aeb..744fa60768 100644
--- a/pir/tags/non-hidden/index.html
+++ b/pir/tags/non-hidden/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/tags/non-hidden/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -270,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/tags/tutorrrial/index.html b/pir/tags/tutorrrial/index.html
index 7e0f2743b2..c5640d75f0 100644
--- a/pir/tags/tutorrrial/index.html
+++ b/pir/tags/tutorrrial/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/tags/tutorrrial/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -261,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/yours/1/index.html b/pir/yours/1/index.html
index 4c295e5793..a299d9a251 100644
--- a/pir/yours/1/index.html
+++ b/pir/yours/1/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -176,7 +176,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -189,6 +189,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/yours/1/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -204,9 +205,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -215,8 +217,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -278,18 +285,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/yours/10/index.html b/pir/yours/10/index.html
index 0b6e839104..44045f5b8a 100644
--- a/pir/yours/10/index.html
+++ b/pir/yours/10/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -176,7 +176,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -189,6 +189,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/yours/10/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -204,9 +205,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -215,8 +217,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -278,18 +285,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/yours/2/index.html b/pir/yours/2/index.html
index 635f97a4ed..a7061f84ee 100644
--- a/pir/yours/2/index.html
+++ b/pir/yours/2/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -176,7 +176,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -189,6 +189,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/yours/2/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -204,9 +205,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -215,8 +217,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -278,18 +285,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/yours/3/index.html b/pir/yours/3/index.html
index 505d36ac31..e8dcf875cf 100644
--- a/pir/yours/3/index.html
+++ b/pir/yours/3/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -176,7 +176,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -189,6 +189,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/yours/3/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -204,9 +205,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -215,8 +217,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -278,18 +285,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/yours/4/index.html b/pir/yours/4/index.html
index 35923d19a0..3c9c09ddc1 100644
--- a/pir/yours/4/index.html
+++ b/pir/yours/4/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -176,7 +176,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -189,6 +189,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/yours/4/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -204,9 +205,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -215,8 +217,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -278,18 +285,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/yours/5/index.html b/pir/yours/5/index.html
index fbc721b46d..58e27b2bb0 100644
--- a/pir/yours/5/index.html
+++ b/pir/yours/5/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -176,7 +176,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -189,6 +189,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/yours/5/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -204,9 +205,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -215,8 +217,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -278,18 +285,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/yours/6/index.html b/pir/yours/6/index.html
index 488ea6ec50..e0a6025320 100644
--- a/pir/yours/6/index.html
+++ b/pir/yours/6/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -176,7 +176,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -189,6 +189,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/yours/6/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -204,9 +205,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -215,8 +217,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -278,18 +285,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/yours/7/index.html b/pir/yours/7/index.html
index 4f72e8875f..76850d5d65 100644
--- a/pir/yours/7/index.html
+++ b/pir/yours/7/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -176,7 +176,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -189,6 +189,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/yours/7/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -204,9 +205,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -215,8 +217,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -278,18 +285,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/yours/8/index.html b/pir/yours/8/index.html
index 0b70565d7f..1f282fc068 100644
--- a/pir/yours/8/index.html
+++ b/pir/yours/8/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -176,7 +176,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -189,6 +189,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/yours/8/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -204,9 +205,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -215,8 +217,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -278,18 +285,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/yours/9/index.html b/pir/yours/9/index.html
index 554bb7ee8d..62c52c3ebb 100644
--- a/pir/yours/9/index.html
+++ b/pir/yours/9/index.html
@@ -8,16 +8,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +111,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -176,7 +176,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -189,6 +189,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/yours/9/" selected>Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -204,9 +205,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -215,8 +217,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -277,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/yours/children-1/index.html b/pir/yours/children-1/index.html
index ab79aedcfd..aa3858a8a1 100644
--- a/pir/yours/children-1/index.html
+++ b/pir/yours/children-1/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -178,7 +178,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -191,6 +191,7 @@
                     <option id="en" value="/hugo-theme-relearn/yours/children-1/">English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -206,9 +207,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -217,8 +219,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -287,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/pir/yours/index.html b/pir/yours/index.html
index e188a90bc5..9a9c5d1af4 100644
--- a/pir/yours/index.html
+++ b/pir/yours/index.html
@@ -9,16 +9,16 @@
     <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?1644768141" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768141" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768141" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768141" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867288" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867288" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867288" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867288" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867288"></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,11 +112,11 @@
           <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?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768141"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768141"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867288"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867288"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/pir/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/pir/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/pir/basics/requirements/" title="Requirrrements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/pir/basics/requirements/">Requirrrements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -177,7 +177,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -190,6 +190,7 @@
                     <option id="en" value="/hugo-theme-relearn/yours/">English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -205,9 +206,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -216,8 +218,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -283,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?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768141"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867288"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867288"></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?1644768141"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867288"></script>
   </body>
 </html>
diff --git a/shortcodes/attachments/index.html b/shortcodes/attachments/index.html
index dd48687ebe..25a8843979 100644
--- a/shortcodes/attachments/index.html
+++ b/shortcodes/attachments/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867286" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867286" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867286" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867286"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867286"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867286"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867286"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/attachments/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -449,18 +456,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867286"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867286"></script>
   </body>
 </html>
diff --git a/shortcodes/button/index.html b/shortcodes/button/index.html
index 2bce1c9249..77343b11ce 100644
--- a/shortcodes/button/index.html
+++ b/shortcodes/button/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867286" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867286" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867286" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867286"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867286"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867286"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867286"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/button/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -288,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867286"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867286"></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 0d65bd98e1..ff0a66f4f8 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,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -170,7 +170,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -183,6 +183,7 @@
                     <option id="pir" value="/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/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -198,9 +199,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -209,8 +211,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -283,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></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 bfe05c5d12..169209f7c2 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,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -170,7 +170,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -183,6 +183,7 @@
                     <option id="pir" value="/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/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -198,9 +199,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -209,8 +211,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -292,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></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 54227fe4d5..b35a78fa06 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,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -168,7 +168,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -181,6 +181,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -196,9 +197,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -207,8 +209,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -289,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></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 17669afd77..37a62c60ca 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,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -168,7 +168,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -181,6 +181,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -196,9 +197,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -207,8 +209,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -288,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></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 f13390cbca..8f5b8a30e1 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,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -277,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></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 b4b23ba74f..610fde348a 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,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -277,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></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 ffbc076c05..f2441760bd 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,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -287,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></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 a77ca935a6..69849ebce1 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,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -276,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></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 c9e8cf86b1..8aa754d95d 100644
--- a/shortcodes/children/children-1/children-1-1/index.html
+++ b/shortcodes/children/children-1/children-1-1/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -287,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/index.html b/shortcodes/children/children-1/index.html
index 34ac653d97..6996641ef2 100644
--- a/shortcodes/children/children-1/index.html
+++ b/shortcodes/children/children-1/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/children-1/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -284,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-2/index.html b/shortcodes/children/children-2/index.html
index 4315323391..3cfdb3e564 100644
--- a/shortcodes/children/children-2/index.html
+++ b/shortcodes/children/children-2/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/children-2/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -275,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-3/index.html b/shortcodes/children/children-3/index.html
index 9b6440b412..c2effcbf97 100644
--- a/shortcodes/children/children-3/index.html
+++ b/shortcodes/children/children-3/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/children-3/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -284,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-3/test3/index.html b/shortcodes/children/children-3/test3/index.html
index 0add994305..dd60905f5f 100644
--- a/shortcodes/children/children-3/test3/index.html
+++ b/shortcodes/children/children-3/test3/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -274,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-4/index.html b/shortcodes/children/children-4/index.html
index a8e7461ca4..5302d25c5e 100644
--- a/shortcodes/children/children-4/index.html
+++ b/shortcodes/children/children-4/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -167,7 +167,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -180,6 +180,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/children-4/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -195,9 +196,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -206,8 +208,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -275,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/shortcodes/children/index.html b/shortcodes/children/index.html
index f4bb270366..06371bd879 100644
--- a/shortcodes/children/index.html
+++ b/shortcodes/children/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -422,18 +429,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/shortcodes/children/test/index.html b/shortcodes/children/test/index.html
index 31758f3fd9..a96a0e2e2a 100644
--- a/shortcodes/children/test/index.html
+++ b/shortcodes/children/test/index.html
@@ -9,16 +9,16 @@
 ">
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/children/test/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -270,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/shortcodes/expand/index.html b/shortcodes/expand/index.html
index 5ed3a5ea99..041d5dc340 100644
--- a/shortcodes/expand/index.html
+++ b/shortcodes/expand/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867286" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867286" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867286" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867286"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867286"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867286"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867286"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/expand/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -407,18 +414,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/shortcodes/include/index.html b/shortcodes/include/index.html
index 7cd31dec9d..b6145b334c 100644
--- a/shortcodes/include/index.html
+++ b/shortcodes/include/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/include/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -308,18 +315,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/shortcodes/include_me/index.html b/shortcodes/include_me/index.html
index 0aa975a470..36d3754852 100644
--- a/shortcodes/include_me/index.html
+++ b/shortcodes/include_me/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -167,7 +167,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="en" value="/hugo-theme-relearn/shortcodes/include_me/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -281,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/shortcodes/index.html b/shortcodes/index.html
index 4c91f7953d..bc0ff2436d 100644
--- a/shortcodes/index.html
+++ b/shortcodes/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="en" value="/hugo-theme-relearn/shortcodes/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -308,18 +315,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/shortcodes/mermaid/index.html b/shortcodes/mermaid/index.html
index e0ca77c5d7..ebaf9ae834 100644
--- a/shortcodes/mermaid/index.html
+++ b/shortcodes/mermaid/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/mermaid/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -511,18 +518,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/shortcodes/notice/index.html b/shortcodes/notice/index.html
index 3fb0f74600..77e09e58ba 100644
--- a/shortcodes/notice/index.html
+++ b/shortcodes/notice/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/notice/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -501,18 +508,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/shortcodes/siteparam/index.html b/shortcodes/siteparam/index.html
index 99e3ea4321..b4d2712a2f 100644
--- a/shortcodes/siteparam/index.html
+++ b/shortcodes/siteparam/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="en" value="/hugo-theme-relearn/shortcodes/siteparam/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -284,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/shortcodes/tabs/index.html b/shortcodes/tabs/index.html
index 0e1105e086..6758bc8b90 100644
--- a/shortcodes/tabs/index.html
+++ b/shortcodes/tabs/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/shortcodes/tabs/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -439,18 +446,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/showcase/index.html b/showcase/index.html
index f369a27e2d..f579b2dd8c 100644
--- a/showcase/index.html
+++ b/showcase/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867286" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867286" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867286" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867286" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867286"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867286"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867286"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867286"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -165,7 +165,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/showcase/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -261,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867286"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867286"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867286"></script>
   </body>
 </html>
diff --git a/tags/children/index.html b/tags/children/index.html
index f792109fa4..681e8519d9 100644
--- a/tags/children/index.html
+++ b/tags/children/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/tags/children/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -275,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/tags/documentation/index.html b/tags/documentation/index.html
index 747ac326fd..16c9355913 100644
--- a/tags/documentation/index.html
+++ b/tags/documentation/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="en" value="/hugo-theme-relearn/tags/documentation/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -261,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/tags/hidden/index.html b/tags/hidden/index.html
index af41ebbb3b..8d84234f61 100644
--- a/tags/hidden/index.html
+++ b/tags/hidden/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/tags/hidden/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -266,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/tags/index.html b/tags/index.html
index d2a3f0d239..ac6a2f1e2b 100644
--- a/tags/index.html
+++ b/tags/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/tags/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -265,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/tags/non-hidden/index.html b/tags/non-hidden/index.html
index 9b33fe5f7d..b988ea4f24 100644
--- a/tags/non-hidden/index.html
+++ b/tags/non-hidden/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -179,6 +179,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/tags/non-hidden/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -194,9 +195,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -205,8 +207,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -270,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/tags/tutorial/index.html b/tags/tutorial/index.html
index b18fa908c6..2c1a3efee8 100644
--- a/tags/tutorial/index.html
+++ b/tags/tutorial/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -166,7 +166,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -178,6 +178,7 @@
                     <option id="en" value="/hugo-theme-relearn/tags/tutorial/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -193,9 +194,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -204,8 +206,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -261,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/1/index.html b/yours/1/index.html
index 44c5919cd8..0ad23bd8bf 100644
--- a/yours/1/index.html
+++ b/yours/1/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -209,6 +209,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/yours/1/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -224,9 +225,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -235,8 +237,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -298,18 +305,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/10/index.html b/yours/10/index.html
index 76373e0a74..fb5847b657 100644
--- a/yours/10/index.html
+++ b/yours/10/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -209,6 +209,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/yours/10/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -224,9 +225,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -235,8 +237,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -298,18 +305,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/11.de/index.html b/yours/11.de/index.html
index 13a796b0ee..49f04be657 100644
--- a/yours/11.de/index.html
+++ b/yours/11.de/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -208,6 +208,7 @@
                     <option id="en" value="/hugo-theme-relearn/yours/11.de/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -223,9 +224,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -234,8 +236,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -297,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/12.de/index.html b/yours/12.de/index.html
index 3945f833dd..4e5c6b7025 100644
--- a/yours/12.de/index.html
+++ b/yours/12.de/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -208,6 +208,7 @@
                     <option id="en" value="/hugo-theme-relearn/yours/12.de/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -223,9 +224,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -234,8 +236,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -297,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/13.de/index.html b/yours/13.de/index.html
index 3784dfac8c..31c8ba1eb5 100644
--- a/yours/13.de/index.html
+++ b/yours/13.de/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -208,6 +208,7 @@
                     <option id="en" value="/hugo-theme-relearn/yours/13.de/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -223,9 +224,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -234,8 +236,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -297,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/14.de/index.html b/yours/14.de/index.html
index f3ce93c7bb..abc8b15bad 100644
--- a/yours/14.de/index.html
+++ b/yours/14.de/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -208,6 +208,7 @@
                     <option id="en" value="/hugo-theme-relearn/yours/14.de/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -223,9 +224,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -234,8 +236,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -297,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/15.de/index.html b/yours/15.de/index.html
index b80074a442..50d53a5fa6 100644
--- a/yours/15.de/index.html
+++ b/yours/15.de/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -208,6 +208,7 @@
                     <option id="en" value="/hugo-theme-relearn/yours/15.de/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -223,9 +224,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -234,8 +236,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -297,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/16.de/index.html b/yours/16.de/index.html
index bf6f527c3d..63ac6e56d6 100644
--- a/yours/16.de/index.html
+++ b/yours/16.de/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -208,6 +208,7 @@
                     <option id="en" value="/hugo-theme-relearn/yours/16.de/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -223,9 +224,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -234,8 +236,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -297,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/17.de/index.html b/yours/17.de/index.html
index b74c8a74f2..356044eb6d 100644
--- a/yours/17.de/index.html
+++ b/yours/17.de/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -208,6 +208,7 @@
                     <option id="en" value="/hugo-theme-relearn/yours/17.de/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -223,9 +224,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -234,8 +236,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -297,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/18.de/index.html b/yours/18.de/index.html
index 477ecb0566..ae4921489a 100644
--- a/yours/18.de/index.html
+++ b/yours/18.de/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -208,6 +208,7 @@
                     <option id="en" value="/hugo-theme-relearn/yours/18.de/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -223,9 +224,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -234,8 +236,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -297,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/19.de/index.html b/yours/19.de/index.html
index aa1879648d..0f064d3ca8 100644
--- a/yours/19.de/index.html
+++ b/yours/19.de/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -208,6 +208,7 @@
                     <option id="en" value="/hugo-theme-relearn/yours/19.de/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -223,9 +224,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -234,8 +236,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -297,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/2/index.html b/yours/2/index.html
index 80e92d9441..4cfb2924bf 100644
--- a/yours/2/index.html
+++ b/yours/2/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -209,6 +209,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/yours/2/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -224,9 +225,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -235,8 +237,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -298,18 +305,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/20.de/index.html b/yours/20.de/index.html
index 5d3206852b..d4ea08f9f2 100644
--- a/yours/20.de/index.html
+++ b/yours/20.de/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -208,6 +208,7 @@
                     <option id="en" value="/hugo-theme-relearn/yours/20.de/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -223,9 +224,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -234,8 +236,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -297,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/21.de/index.html b/yours/21.de/index.html
index 2015122f29..4ccf673653 100644
--- a/yours/21.de/index.html
+++ b/yours/21.de/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -208,6 +208,7 @@
                     <option id="en" value="/hugo-theme-relearn/yours/21.de/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -223,9 +224,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -234,8 +236,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -297,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/22.de/index.html b/yours/22.de/index.html
index b54e4ccaef..e4136efa53 100644
--- a/yours/22.de/index.html
+++ b/yours/22.de/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -208,6 +208,7 @@
                     <option id="en" value="/hugo-theme-relearn/yours/22.de/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -223,9 +224,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -234,8 +236,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -297,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/23.de/index.html b/yours/23.de/index.html
index 099d28d259..de3605acad 100644
--- a/yours/23.de/index.html
+++ b/yours/23.de/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -208,6 +208,7 @@
                     <option id="en" value="/hugo-theme-relearn/yours/23.de/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -223,9 +224,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -234,8 +236,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -297,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/24.de/index.html b/yours/24.de/index.html
index 95267d00fa..bdf8c19f83 100644
--- a/yours/24.de/index.html
+++ b/yours/24.de/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -208,6 +208,7 @@
                     <option id="en" value="/hugo-theme-relearn/yours/24.de/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -223,9 +224,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -234,8 +236,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -297,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/25.de/index.html b/yours/25.de/index.html
index 8c829f5444..89c2968f48 100644
--- a/yours/25.de/index.html
+++ b/yours/25.de/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -208,6 +208,7 @@
                     <option id="en" value="/hugo-theme-relearn/yours/25.de/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -223,9 +224,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -234,8 +236,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -297,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/26.de/index.html b/yours/26.de/index.html
index a95139191a..9b3d467902 100644
--- a/yours/26.de/index.html
+++ b/yours/26.de/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -208,6 +208,7 @@
                     <option id="en" value="/hugo-theme-relearn/yours/26.de/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -223,9 +224,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -234,8 +236,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -297,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/27.de/index.html b/yours/27.de/index.html
index bab55b4370..d597bef846 100644
--- a/yours/27.de/index.html
+++ b/yours/27.de/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -208,6 +208,7 @@
                     <option id="en" value="/hugo-theme-relearn/yours/27.de/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -223,9 +224,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -234,8 +236,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -297,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/28.de/index.html b/yours/28.de/index.html
index 55728c206d..93ae5b5df4 100644
--- a/yours/28.de/index.html
+++ b/yours/28.de/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -208,6 +208,7 @@
                     <option id="en" value="/hugo-theme-relearn/yours/28.de/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -223,9 +224,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -234,8 +236,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -297,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/29.de/index.html b/yours/29.de/index.html
index 42f7ec08f5..ef476bf4ae 100644
--- a/yours/29.de/index.html
+++ b/yours/29.de/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -208,6 +208,7 @@
                     <option id="en" value="/hugo-theme-relearn/yours/29.de/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -223,9 +224,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -234,8 +236,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -297,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/3/index.html b/yours/3/index.html
index d7e398dead..d5b0e7a027 100644
--- a/yours/3/index.html
+++ b/yours/3/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -209,6 +209,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/yours/3/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -224,9 +225,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -235,8 +237,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -298,18 +305,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/30.de/index.html b/yours/30.de/index.html
index e65d3bf229..2e2cb3d144 100644
--- a/yours/30.de/index.html
+++ b/yours/30.de/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -208,6 +208,7 @@
                     <option id="en" value="/hugo-theme-relearn/yours/30.de/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -223,9 +224,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -234,8 +236,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -297,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/4/index.html b/yours/4/index.html
index 1b1ec420f0..e4000a4b90 100644
--- a/yours/4/index.html
+++ b/yours/4/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -209,6 +209,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/yours/4/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -224,9 +225,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -235,8 +237,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -298,18 +305,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/5/index.html b/yours/5/index.html
index 86ca5b709b..a59e13b3f1 100644
--- a/yours/5/index.html
+++ b/yours/5/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -209,6 +209,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/yours/5/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -224,9 +225,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -235,8 +237,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -298,18 +305,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/6/index.html b/yours/6/index.html
index cffe119360..89a7beaf92 100644
--- a/yours/6/index.html
+++ b/yours/6/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -209,6 +209,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/yours/6/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -224,9 +225,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -235,8 +237,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -298,18 +305,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/7/index.html b/yours/7/index.html
index d1b6d6092f..bd69859817 100644
--- a/yours/7/index.html
+++ b/yours/7/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -209,6 +209,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/yours/7/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -224,9 +225,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -235,8 +237,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -298,18 +305,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/8/index.html b/yours/8/index.html
index 5d60d2fff6..e7a638d1a3 100644
--- a/yours/8/index.html
+++ b/yours/8/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -209,6 +209,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/yours/8/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -224,9 +225,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -235,8 +237,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -298,18 +305,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/9/index.html b/yours/9/index.html
index 0b58e4091c..beb4b508d6 100644
--- a/yours/9/index.html
+++ b/yours/9/index.html
@@ -8,16 +8,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -68,7 +68,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +111,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -196,7 +196,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -209,6 +209,7 @@
                     <option id="pir" value="/hugo-theme-relearn/pir/yours/9/">Arrr! Pirrrates</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -224,9 +225,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -235,8 +237,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -297,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/children-1/index.html b/yours/children-1/index.html
index 0566f775c9..21eda3fe9a 100644
--- a/yours/children-1/index.html
+++ b/yours/children-1/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -198,7 +198,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -211,6 +211,7 @@
                     <option id="en" value="/hugo-theme-relearn/yours/children-1/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -226,9 +227,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -237,8 +239,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -300,18 +307,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>
diff --git a/yours/index.html b/yours/index.html
index b63b03ca9a..dab79426ee 100644
--- a/yours/index.html
+++ b/yours/index.html
@@ -9,16 +9,16 @@
     <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?1644768140" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1644768140" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1644768140" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/print.css?1644768140" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1644867287" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1644867287" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1644867287" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/print.css?1644867287" rel="stylesheet" media="print">
     <style>
     </style>
     <script>
@@ -69,7 +69,7 @@
         }
       }
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1644867287"></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,11 +112,11 @@
           <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?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1644768140"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1644768140"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1644867287"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1644867287"></script>
       </div>
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           <li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
           <li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
@@ -197,7 +197,7 @@
           </ul>
         </div>
         <div class="footermargin"></div>
-        <hr/>
+        <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
             <li>
@@ -210,6 +210,7 @@
                     <option id="en" value="/hugo-theme-relearn/yours/" selected>English</option>
                   </select>
                 </div>
+                <div class="select-clear"></div>
               </a>
             </li>
             <li>
@@ -225,9 +226,10 @@
                     <option id="green" value="green">Green</option>
                     <option id="red" value="red">Red</option>
                   </select>
-                  <script>markTheme( getTheme() );</script>
                 </div>
+                <div class="select-clear"></div>
               </a>
+              <script>markTheme( getTheme() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -236,8 +238,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
@@ -296,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?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644768140"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1644867287"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1644867287"></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?1644768140"></script>
+    <script src="/hugo-theme-relearn/js/relearn.js?1644867287"></script>
   </body>
 </html>