From 1ef1451b20228827568b82d5df844f3ebbbbfef8 Mon Sep 17 00:00:00 2001
From: McShelby <McShelby@users.noreply.github.com>
Date: Thu, 23 Nov 2023 00:05:57 +0000
Subject: [PATCH] deploy: a4355877658a5297d303fc82c1ec3b868da66cda

---
 404.html                                      |  28 +-
 basics/branding/index.html                    |  81 +++--
 basics/branding/index.print.html              |  64 +++-
 basics/changelog/index.html                   |  52 +--
 basics/changelog/index.print.html             |  36 +-
 basics/configuration/index.html               |  86 +++--
 basics/configuration/index.print.html         |  70 ++--
 basics/customization/index.html               |  60 +--
 basics/customization/index.print.html         |  44 +--
 basics/generator/index.html                   |  80 ++--
 basics/generator/index.print.html             |  64 ++--
 basics/history/index.html                     |  52 +--
 basics/history/index.print.html               |  36 +-
 basics/index.html                             |  52 +--
 basics/index.print.html                       | 154 ++++----
 basics/installation/index.html                |  56 +--
 basics/installation/index.print.html          |  40 +-
 basics/migration/index.html                   |  56 +--
 basics/migration/index.print.html             |  40 +-
 basics/requirements/index.html                |  56 +--
 basics/requirements/index.print.html          |  40 +-
 basics/topbar/index.html                      |  60 +--
 basics/topbar/index.print.html                |  44 +--
 categories/basic/index.html                   |  52 +--
 categories/content/index.html                 |  52 +--
 categories/custom/index.html                  |  52 +--
 categories/index.html                         |  52 +--
 categories/taxonomy/index.html                |  52 +--
 categories/theming/index.html                 |  52 +--
 config/_default/params.toml                   |  30 +-
 cont/archetypes/index.html                    |  64 ++--
 cont/archetypes/index.print.html              |  48 +--
 cont/i18n/index.html                          |  56 +--
 cont/i18n/index.print.html                    |  40 +-
 cont/imageeffects/index.html                  |  72 ++--
 cont/imageeffects/index.print.html            |  56 +--
 cont/index.html                               |  52 +--
 cont/index.print.html                         | 136 +++----
 cont/markdown/index.html                      | 112 +++---
 cont/markdown/index.print.html                |  96 ++---
 cont/menushortcuts/index.html                 |  52 +--
 cont/menushortcuts/index.print.html           |  36 +-
 cont/pages/index.html                         |  56 +--
 cont/pages/index.print.html                   |  40 +-
 cont/taxonomy/index.html                      |  52 +--
 cont/taxonomy/index.print.html                |  36 +-
 ...{theme-auto.css => theme-relearn-auto.css} |   0
 css/theme-zen-auto.css                        |   2 +
 dev/contributing/index.html                   |  52 +--
 dev/contributing/index.print.html             |  36 +-
 dev/index.html                                |  52 +--
 dev/index.print.html                          |  48 +--
 dev/maintaining/index.html                    |  52 +--
 dev/maintaining/index.print.html              |  36 +-
 dev/screenshots/index.html                    |  64 ++--
 dev/screenshots/index.print.html              |  48 +--
 index.html                                    |  56 +--
 index.print.html                              | 344 +++++++++---------
 index.search.js                               |   6 +-
 more/credits/index.html                       |  52 +--
 more/credits/index.print.html                 |  36 +-
 pir/404.html                                  |  28 +-
 pir/basics/branding/index.html                |  81 +++--
 pir/basics/branding/index.print.html          |  64 +++-
 pir/basics/configuration/index.html           |  86 +++--
 pir/basics/configuration/index.print.html     |  70 ++--
 pir/basics/customization/index.html           |  60 +--
 pir/basics/customization/index.print.html     |  44 +--
 pir/basics/generator/index.html               |  80 ++--
 pir/basics/generator/index.print.html         |  64 ++--
 pir/basics/history/index.html                 |  52 +--
 pir/basics/history/index.print.html           |  36 +-
 pir/basics/index.html                         |  52 +--
 pir/basics/index.print.html                   | 154 ++++----
 pir/basics/installation/index.html            |  56 +--
 pir/basics/installation/index.print.html      |  40 +-
 pir/basics/migration/index.html               |  56 +--
 pir/basics/migration/index.print.html         |  40 +-
 pir/basics/requirements/index.html            |  56 +--
 pir/basics/requirements/index.print.html      |  40 +-
 pir/basics/topbar/index.html                  |  60 +--
 pir/basics/topbar/index.print.html            |  44 +--
 pir/categories/basic/index.html               |  52 +--
 pir/categories/content/index.html             |  52 +--
 pir/categories/custom/index.html              |  52 +--
 pir/categories/index.html                     |  52 +--
 pir/categories/taxonomy/index.html            |  52 +--
 pir/categories/theming/index.html             |  52 +--
 pir/cont/archetypes/index.html                |  64 ++--
 pir/cont/archetypes/index.print.html          |  48 +--
 pir/cont/i18n/index.html                      |  56 +--
 pir/cont/i18n/index.print.html                |  40 +-
 pir/cont/imageeffects/index.html              |  72 ++--
 pir/cont/imageeffects/index.print.html        |  56 +--
 pir/cont/index.html                           |  52 +--
 pir/cont/index.print.html                     | 136 +++----
 pir/cont/markdown/index.html                  | 112 +++---
 pir/cont/markdown/index.print.html            |  96 ++---
 pir/cont/menushortcuts/index.html             |  52 +--
 pir/cont/menushortcuts/index.print.html       |  36 +-
 pir/cont/pages/index.html                     |  56 +--
 pir/cont/pages/index.print.html               |  40 +-
 pir/cont/taxonomy/index.html                  |  52 +--
 pir/cont/taxonomy/index.print.html            |  36 +-
 pir/dev/contributing/index.html               |  52 +--
 pir/dev/contributing/index.print.html         |  36 +-
 pir/dev/index.html                            |  52 +--
 pir/dev/index.print.html                      |  48 +--
 pir/dev/maintaining/index.html                |  52 +--
 pir/dev/maintaining/index.print.html          |  36 +-
 pir/dev/screenshots/index.html                |  64 ++--
 pir/dev/screenshots/index.print.html          |  48 +--
 pir/index.html                                |  56 +--
 pir/index.print.html                          | 344 +++++++++---------
 pir/index.search.js                           |   6 +-
 pir/more/credits/index.html                   |  52 +--
 pir/more/credits/index.print.html             |  36 +-
 pir/search.html                               |  52 +--
 pir/shortcodes/attachments/index.html         |  52 +--
 pir/shortcodes/attachments/index.print.html   |  36 +-
 pir/shortcodes/badge/index.html               |  52 +--
 pir/shortcodes/badge/index.print.html         |  36 +-
 pir/shortcodes/button/index.html              |  52 +--
 pir/shortcodes/button/index.print.html        |  36 +-
 .../children-1-1-1-1-1-1/index.html           |  52 +--
 .../children-1-1-1-1-1-1/index.print.html     |  36 +-
 .../children-1-1-1-1-1/index.html             |  52 +--
 .../children-1-1-1-1-1/index.print.html       |  36 +-
 .../children-1-1-1-1/index.html               |  52 +--
 .../children-1-1-1-1/index.print.html         |  36 +-
 .../children-1-1/children-1-1-1/index.html    |  52 +--
 .../children-1-1-1/index.print.html           |  36 +-
 .../children-1-1-2-1/index.html               |  52 +--
 .../children-1-1-2-1/index.print.html         |  36 +-
 .../children-1-1-2-2/index.html               |  52 +--
 .../children-1-1-2-2/index.print.html         |  36 +-
 .../children-1-1/children-1-1-3/index.html    |  52 +--
 .../children-1-1-3/index.print.html           |  36 +-
 .../children-1/children-1-1/index.html        |  52 +--
 .../children-1/children-1-1/index.print.html  |  36 +-
 pir/shortcodes/children/children-1/index.html |  52 +--
 .../children/children-1/index.print.html      |  36 +-
 pir/shortcodes/children/children-2/index.html |  52 +--
 .../children/children-2/index.print.html      |  36 +-
 pir/shortcodes/children/children-3/index.html |  52 +--
 .../children/children-3/index.print.html      |  36 +-
 .../children/children-3/test3/index.html      |  52 +--
 .../children-3/test3/index.print.html         |  36 +-
 pir/shortcodes/children/children-4/index.html |  52 +--
 .../children/children-4/index.print.html      |  36 +-
 pir/shortcodes/children/index.html            |  52 +--
 pir/shortcodes/children/index.print.html      |  36 +-
 pir/shortcodes/children/test/index.html       |  52 +--
 pir/shortcodes/children/test/index.print.html |  36 +-
 pir/shortcodes/expand/index.html              |  76 ++--
 pir/shortcodes/expand/index.print.html        |  60 +--
 pir/shortcodes/highlight/index.html           |  60 +--
 pir/shortcodes/highlight/index.print.html     |  44 +--
 pir/shortcodes/icon/index.html                |  52 +--
 pir/shortcodes/icon/index.print.html          |  36 +-
 pir/shortcodes/include/index.html             |  52 +--
 pir/shortcodes/include/index.print.html       |  36 +-
 pir/shortcodes/index.html                     |  52 +--
 pir/shortcodes/index.print.html               | 144 ++++----
 pir/shortcodes/math/index.html                |  54 +--
 pir/shortcodes/math/index.print.html          |  38 +-
 pir/shortcodes/mermaid/index.html             |  74 ++--
 pir/shortcodes/mermaid/index.print.html       |  58 +--
 pir/shortcodes/notice/index.html              |  52 +--
 pir/shortcodes/notice/index.print.html        |  36 +-
 pir/shortcodes/openapi/index.html             |  60 +--
 pir/shortcodes/openapi/index.print.html       |  44 +--
 pir/shortcodes/siteparam/index.html           |  56 +--
 pir/shortcodes/siteparam/index.print.html     |  40 +-
 pir/shortcodes/tab/index.html                 |  76 ++--
 pir/shortcodes/tab/index.print.html           |  60 +--
 pir/shortcodes/tabs/index.html                |  68 ++--
 pir/shortcodes/tabs/index.print.html          |  52 +--
 pir/showcase/index.html                       |  52 +--
 pir/showcase/index.print.html                 |  36 +-
 pir/tags/children/index.html                  |  52 +--
 pir/tags/config/index.html                    |  52 +--
 pir/tags/content/index.html                   |  52 +--
 pir/tags/documentatn/index.html               |  52 +--
 pir/tags/headless/index.html                  |  52 +--
 pir/tags/index.html                           |  52 +--
 pir/tags/its-hidden/index.html                |  52 +--
 pir/tags/non-hidden/index.html                |  52 +--
 pir/tags/tutorrrial/index.html                |  52 +--
 search.html                                   |  52 +--
 shortcodes/attachments/index.html             |  52 +--
 shortcodes/attachments/index.print.html       |  36 +-
 shortcodes/badge/index.html                   |  52 +--
 shortcodes/badge/index.print.html             |  36 +-
 shortcodes/button/index.html                  |  52 +--
 shortcodes/button/index.print.html            |  36 +-
 .../children-1-1-1-1-1-1/index.html           |  52 +--
 .../children-1-1-1-1-1-1/index.print.html     |  36 +-
 .../children-1-1-1-1-1/index.html             |  52 +--
 .../children-1-1-1-1-1/index.print.html       |  36 +-
 .../children-1-1-1-1/index.html               |  52 +--
 .../children-1-1-1-1/index.print.html         |  36 +-
 .../children-1-1/children-1-1-1/index.html    |  52 +--
 .../children-1-1-1/index.print.html           |  36 +-
 .../children-1-1-2-1/index.html               |  52 +--
 .../children-1-1-2-1/index.print.html         |  36 +-
 .../children-1-1-2-2/index.html               |  52 +--
 .../children-1-1-2-2/index.print.html         |  36 +-
 .../children-1-1/children-1-1-3/index.html    |  52 +--
 .../children-1-1-3/index.print.html           |  36 +-
 .../children-1/children-1-1/index.html        |  52 +--
 .../children-1/children-1-1/index.print.html  |  36 +-
 shortcodes/children/children-1/index.html     |  52 +--
 .../children/children-1/index.print.html      |  36 +-
 shortcodes/children/children-2/index.html     |  52 +--
 .../children/children-2/index.print.html      |  36 +-
 shortcodes/children/children-3/index.html     |  52 +--
 .../children/children-3/index.print.html      |  36 +-
 .../children/children-3/test3/index.html      |  52 +--
 .../children-3/test3/index.print.html         |  36 +-
 shortcodes/children/children-4/index.html     |  52 +--
 .../children/children-4/index.print.html      |  36 +-
 shortcodes/children/index.html                |  52 +--
 shortcodes/children/index.print.html          |  36 +-
 shortcodes/children/test/index.html           |  52 +--
 shortcodes/children/test/index.print.html     |  36 +-
 shortcodes/expand/index.html                  |  76 ++--
 shortcodes/expand/index.print.html            |  60 +--
 shortcodes/highlight/index.html               |  60 +--
 shortcodes/highlight/index.print.html         |  44 +--
 shortcodes/icon/index.html                    |  52 +--
 shortcodes/icon/index.print.html              |  36 +-
 shortcodes/include/index.html                 |  52 +--
 shortcodes/include/index.print.html           |  36 +-
 shortcodes/include_me/index.html              |  52 +--
 shortcodes/include_me/index.print.html        |  36 +-
 shortcodes/index.html                         |  52 +--
 shortcodes/index.print.html                   | 144 ++++----
 shortcodes/math/index.html                    |  54 +--
 shortcodes/math/index.print.html              |  38 +-
 shortcodes/mermaid/index.html                 |  74 ++--
 shortcodes/mermaid/index.print.html           |  58 +--
 shortcodes/notice/index.html                  |  52 +--
 shortcodes/notice/index.print.html            |  36 +-
 shortcodes/openapi/index.html                 |  60 +--
 shortcodes/openapi/index.print.html           |  44 +--
 shortcodes/siteparam/index.html               |  56 +--
 shortcodes/siteparam/index.print.html         |  40 +-
 shortcodes/tab/index.html                     |  76 ++--
 shortcodes/tab/index.print.html               |  60 +--
 shortcodes/tabs/index.html                    |  68 ++--
 shortcodes/tabs/index.print.html              |  52 +--
 showcase/index.html                           |  52 +--
 showcase/index.print.html                     |  36 +-
 tags/children/index.html                      |  52 +--
 tags/config/index.html                        |  52 +--
 tags/content/index.html                       |  52 +--
 tags/documentation/index.html                 |  52 +--
 tags/headless/index.html                      |  52 +--
 tags/index.html                               |  52 +--
 tags/its-hidden/index.html                    |  52 +--
 tags/non-hidden/index.html                    |  52 +--
 tags/tutorial/index.html                      |  52 +--
 263 files changed, 7352 insertions(+), 6922 deletions(-)
 rename css/{theme-auto.css => theme-relearn-auto.css} (100%)
 create mode 100644 css/theme-zen-auto.css

diff --git a/404.html b/404.html
index cdb74af7be..ac8a241a0c 100644
--- a/404.html
+++ b/404.html
@@ -19,20 +19,20 @@
     <meta property="og:site_name" content="Hugo Relearn Theme">
     <title>404 Page not found :: Hugo Relearn Theme</title>
     <base href="https://McShelby.github.io/hugo-theme-relearn/">
-    <link href="./images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="./images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="./css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="./css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="./css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="./css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="./css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="./css/theme.css?1700525732" rel="stylesheet">
-    <link href="./css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="./css/variant.css?1700525732" rel="stylesheet">
-    <link href="./css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="./css/ie.css?1700525732" rel="stylesheet">
-    <script src="./js/url.js?1700525732"></script>
-    <script src="./js/variant.js?1700525732"></script>
+    <link href="./css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="./css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="./css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="./css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="./css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="./css/theme.css?1700697951" rel="stylesheet">
+    <link href="./css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="./css/variant.css?1700697951" rel="stylesheet">
+    <link href="./css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="./css/ie.css?1700697951" rel="stylesheet">
+    <script src="./js/url.js?1700697951"></script>
+    <script src="./js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -42,7 +42,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
diff --git a/basics/branding/index.html b/basics/branding/index.html
index 25718bbb23..9d188b102c 100644
--- a/basics/branding/index.html
+++ b/basics/branding/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/branding/index.html" rel="alternate" hreflang="pir">
     <link href="../../basics/branding/index.xml" rel="alternate" type="application/rss+xml" title="Branding :: Hugo Relearn Theme">
     <link href="../../basics/branding/index.print.html" rel="alternate" type="text/html" title="Branding :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -96,6 +96,7 @@
     <li><a href="#theme-variant-advanced">Change the Variant (Advanced)</a>
       <ul>
         <li><a href="#parameter">Parameter</a></li>
+        <li><a href="#example-configuration-of-this-site">Example Configuration of This Site</a></li>
       </ul>
     </li>
   </ul>
@@ -181,7 +182,7 @@
 </div>
 </div>
 <h2 id="adjust-to-os-settings">Adjust to OS Settings</h2>
-<p>You can also cause the site to adjust to your OS settings for light/dark mode. Just set the <code>themeVariant</code> to <code>auto</code>. That&rsquo;s it.</p>
+<p>You can also cause the site to adjust to your OS settings for light/dark mode. Just set the <code>themeVariant</code> to <code>auto</code> to become an auto mode variant. That&rsquo;s it.</p>
 <p>You can use the <code>auto</code> value with the single or multiple variants option. If you are using multiple variants, you can drop <code>auto</code> at any position in the option&rsquo;s array, but usually it makes sense to set it in the first position and make it the default.</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">themeVariant</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;auto&#34;</span><span class="p">,</span> <span class="s2">&#34;red&#34;</span> <span class="p">]</span></span></span></code></pre></div><p>If you don&rsquo;t configure anything else, the theme will default to use <code>relearn-light</code> for light mode and <code>relearn-dark</code> for dark mode. These defaults are overwritten by the first two non-auto options of your <code>themeVariant</code> option if present.</p>
@@ -238,9 +239,33 @@
 <td>see notes</td>
 <td>The name to be displayed in the variant selector. If not set, the identifier is used in a human readable form.</td>
 </tr>
+<tr>
+<td>auto</td>
+<td><em>&lt;empty&gt;</em></td>
+<td>If set, the variant is treated as an <a href="#adjust-to-os-settings">auto mode variant</a>. It has the same behavior as the <code>themeVariantAuto</code> option. The first entry in the array is the color variant for light mode, the second for dark mode. Defining auto mode variants with the advanced options has the benefit that you can now have multiple auto mode variants instead of just one with the simple options.</td>
+</tr>
 </tbody>
 </table>
-
+<h3 id="example-configuration-of-this-site">Example Configuration of This Site</h3>
+<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-auto&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Relearn Light/Dark&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">auto</span> <span class="p">=</span> <span class="p">[]</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-auto&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Zen Light/Dark&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">auto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;zen-light&#34;</span><span class="p">,</span> <span class="s2">&#34;zen-dark&#34;</span> <span class="p">]</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-light&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-dark&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;neon&#34;</span></span></span></code></pre></div>
             <footer class="footline">
 <div class=" taxonomy-categories term-list cstyle  " title="Categories" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
   <i class="fa-fw fas fa-layer-group"></i>
@@ -336,12 +361,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -431,9 +456,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -498,13 +525,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/basics/branding/index.print.html b/basics/branding/index.print.html
index e13662af1e..9bf7c9fda7 100644
--- a/basics/branding/index.print.html
+++ b/basics/branding/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/branding/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/branding/index.html" rel="canonical" type="text/html" title="Branding :: Hugo Relearn Theme">
     <link href="../../basics/branding/index.xml" rel="alternate" type="application/rss+xml" title="Branding :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -123,7 +123,7 @@
 </div>
 </div>
 <h2 id="adjust-to-os-settings">Adjust to OS Settings</h2>
-<p>You can also cause the site to adjust to your OS settings for light/dark mode. Just set the <code>themeVariant</code> to <code>auto</code>. That&rsquo;s it.</p>
+<p>You can also cause the site to adjust to your OS settings for light/dark mode. Just set the <code>themeVariant</code> to <code>auto</code> to become an auto mode variant. That&rsquo;s it.</p>
 <p>You can use the <code>auto</code> value with the single or multiple variants option. If you are using multiple variants, you can drop <code>auto</code> at any position in the option&rsquo;s array, but usually it makes sense to set it in the first position and make it the default.</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">themeVariant</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;auto&#34;</span><span class="p">,</span> <span class="s2">&#34;red&#34;</span> <span class="p">]</span></span></span></code></pre></div><p>If you don&rsquo;t configure anything else, the theme will default to use <code>relearn-light</code> for light mode and <code>relearn-dark</code> for dark mode. These defaults are overwritten by the first two non-auto options of your <code>themeVariant</code> option if present.</p>
@@ -180,9 +180,33 @@
 <td>see notes</td>
 <td>The name to be displayed in the variant selector. If not set, the identifier is used in a human readable form.</td>
 </tr>
+<tr>
+<td>auto</td>
+<td><em>&lt;empty&gt;</em></td>
+<td>If set, the variant is treated as an <a href="#adjust-to-os-settings">auto mode variant</a>. It has the same behavior as the <code>themeVariantAuto</code> option. The first entry in the array is the color variant for light mode, the second for dark mode. Defining auto mode variants with the advanced options has the benefit that you can now have multiple auto mode variants instead of just one with the simple options.</td>
+</tr>
 </tbody>
 </table>
-
+<h3 id="example-configuration-of-this-site">Example Configuration of This Site</h3>
+<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-auto&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Relearn Light/Dark&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">auto</span> <span class="p">=</span> <span class="p">[]</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-auto&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Zen Light/Dark&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">auto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;zen-light&#34;</span><span class="p">,</span> <span class="s2">&#34;zen-dark&#34;</span> <span class="p">]</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-light&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-dark&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;neon&#34;</span></span></span></code></pre></div>
             <footer class="footline">
 <div class=" taxonomy-categories term-list cstyle  " title="Categories" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
   <i class="fa-fw fas fa-layer-group"></i>
@@ -197,8 +221,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/basics/changelog/index.html b/basics/changelog/index.html
index 774ddb5193..3bd6957dd2 100644
--- a/basics/changelog/index.html
+++ b/basics/changelog/index.html
@@ -20,20 +20,20 @@
     <meta property="article:section" content="Basics :: Hugo Relearn Theme">
     <meta property="og:site_name" content="Hugo Relearn Theme">
     <title></title>
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -43,7 +43,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -2249,12 +2249,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525732" defer></script>
-        <script src="../../js/search.js?1700525732" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -2344,9 +2344,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -2411,13 +2413,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525732"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525732" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525732" defer></script>
-    <script src="../../js/theme.js?1700525732" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/basics/changelog/index.print.html b/basics/changelog/index.print.html
index 1ae612e100..ba998ed98b 100644
--- a/basics/changelog/index.print.html
+++ b/basics/changelog/index.print.html
@@ -20,21 +20,21 @@
     <meta property="article:section" content="Basics :: Hugo Relearn Theme">
     <meta property="og:site_name" content="Hugo Relearn Theme">
     <title></title>
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -44,7 +44,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -87,8 +87,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/basics/configuration/index.html b/basics/configuration/index.html
index 91ddc2124a..800b689a57 100644
--- a/basics/configuration/index.html
+++ b/basics/configuration/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/configuration/index.html" rel="alternate" hreflang="pir">
     <link href="../../basics/configuration/index.xml" rel="alternate" type="application/rss+xml" title="Configuration :: Hugo Relearn Theme">
     <link href="../../basics/configuration/index.print.html" rel="alternate" type="text/html" title="Configuration :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -141,13 +141,13 @@
 <p>Note that some of these options are explained in detail in other sections of this documentation.</p>
 
   
-<div class="tab-panel" data-tab-group="00480a48a09d05bd21c01fb64fb62010">
+<div class="tab-panel" data-tab-group="8cb9d10357093b8b6270287c8d9f96d5">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('00480a48a09d05bd21c01fb64fb62010','configtoml')"
+      onclick="switchTab('8cb9d10357093b8b6270287c8d9f96d5','configtoml')"
     >
       <span class="tab-nav-text">config.toml</span>
     </button>
@@ -222,26 +222,20 @@
 </span></span><span class="line"><span class="cl"><span class="c"># You can also define your own variants. See the docs how this works. Also,</span>
 </span></span><span class="line"><span class="cl"><span class="c"># the docs provide an interactive theme generator to help you with this task.</span>
 </span></span><span class="line"><span class="cl"><span class="nx">themeVariant</span> <span class="p">=</span> <span class="p">[</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;auto&#34;</span>          <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span> <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>  <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-light&#34;</span>     <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-dark&#34;</span>      <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;neon&#34;</span>          <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;learn&#34;</span>         <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;blue&#34;</span>          <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;green&#34;</span>         <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;red&#34;</span>           <span class="p">}</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-auto&#34;</span><span class="p">,</span>  <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Relearn Light/Dark&#34;</span><span class="p">,</span> <span class="nx">auto</span> <span class="p">=</span> <span class="p">[]</span> <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span>  <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>   <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-bright&#34;</span> <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-auto&#34;</span><span class="p">,</span>      <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Zen Light/Dark&#34;</span><span class="p">,</span> <span class="nx">auto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;zen-light&#34;</span><span class="p">,</span> <span class="s2">&#34;zen-dark&#34;</span> <span class="p">]</span> <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-light&#34;</span>      <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-dark&#34;</span>       <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;neon&#34;</span>           <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;learn&#34;</span>          <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;blue&#34;</span>           <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;green&#34;</span>          <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;red&#34;</span>            <span class="p">}</span>
 </span></span><span class="line"><span class="cl"><span class="p">]</span>
 </span></span><span class="line"><span class="cl">
-</span></span><span class="line"><span class="cl"><span class="c"># The color variants used for auto mode.</span>
-</span></span><span class="line"><span class="cl"><span class="c"># Default: [ &#34;relearn-light&#34;, &#34;relearn-dark&#34; ], overwritten by the first</span>
-</span></span><span class="line"><span class="cl"><span class="c"># two non-auto options of your `themeVariant` option if present.</span>
-</span></span><span class="line"><span class="cl"><span class="c"># The auto variant defines how your site adjusts to your selected OS settings</span>
-</span></span><span class="line"><span class="cl"><span class="c"># for light/dark mode. The first array element is the variant for light mode,</span>
-</span></span><span class="line"><span class="cl"><span class="c"># the second for dark mode.</span>
-</span></span><span class="line"><span class="cl"><span class="nx">themeVariantAuto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;relearn-light&#34;</span><span class="p">,</span> <span class="s2">&#34;relearn-dark&#34;</span> <span class="p">]</span>
-</span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl"><span class="c">#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span>
 </span></span><span class="line"><span class="cl"><span class="c"># General</span>
 </span></span><span class="line"><span class="cl"><span class="c"># These options are defining general, non visual behavior.</span>
@@ -671,12 +665,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -766,9 +760,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -833,13 +829,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/basics/configuration/index.print.html b/basics/configuration/index.print.html
index e01a39edf9..f1c94ff729 100644
--- a/basics/configuration/index.print.html
+++ b/basics/configuration/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/configuration/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/configuration/index.html" rel="canonical" type="text/html" title="Configuration :: Hugo Relearn Theme">
     <link href="../../basics/configuration/index.xml" rel="alternate" type="application/rss+xml" title="Configuration :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -102,13 +102,13 @@
 <p>Note that some of these options are explained in detail in other sections of this documentation.</p>
 
   
-<div class="tab-panel" data-tab-group="00480a48a09d05bd21c01fb64fb62010">
+<div class="tab-panel" data-tab-group="8cb9d10357093b8b6270287c8d9f96d5">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('00480a48a09d05bd21c01fb64fb62010','configtoml')"
+      onclick="switchTab('8cb9d10357093b8b6270287c8d9f96d5','configtoml')"
     >
       <span class="tab-nav-text">config.toml</span>
     </button>
@@ -183,26 +183,20 @@
 </span></span><span class="line"><span class="cl"><span class="c"># You can also define your own variants. See the docs how this works. Also,</span>
 </span></span><span class="line"><span class="cl"><span class="c"># the docs provide an interactive theme generator to help you with this task.</span>
 </span></span><span class="line"><span class="cl"><span class="nx">themeVariant</span> <span class="p">=</span> <span class="p">[</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;auto&#34;</span>          <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span> <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>  <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-light&#34;</span>     <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-dark&#34;</span>      <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;neon&#34;</span>          <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;learn&#34;</span>         <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;blue&#34;</span>          <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;green&#34;</span>         <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;red&#34;</span>           <span class="p">}</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-auto&#34;</span><span class="p">,</span>  <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Relearn Light/Dark&#34;</span><span class="p">,</span> <span class="nx">auto</span> <span class="p">=</span> <span class="p">[]</span> <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span>  <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>   <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-bright&#34;</span> <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-auto&#34;</span><span class="p">,</span>      <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Zen Light/Dark&#34;</span><span class="p">,</span> <span class="nx">auto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;zen-light&#34;</span><span class="p">,</span> <span class="s2">&#34;zen-dark&#34;</span> <span class="p">]</span> <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-light&#34;</span>      <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-dark&#34;</span>       <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;neon&#34;</span>           <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;learn&#34;</span>          <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;blue&#34;</span>           <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;green&#34;</span>          <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;red&#34;</span>            <span class="p">}</span>
 </span></span><span class="line"><span class="cl"><span class="p">]</span>
 </span></span><span class="line"><span class="cl">
-</span></span><span class="line"><span class="cl"><span class="c"># The color variants used for auto mode.</span>
-</span></span><span class="line"><span class="cl"><span class="c"># Default: [ &#34;relearn-light&#34;, &#34;relearn-dark&#34; ], overwritten by the first</span>
-</span></span><span class="line"><span class="cl"><span class="c"># two non-auto options of your `themeVariant` option if present.</span>
-</span></span><span class="line"><span class="cl"><span class="c"># The auto variant defines how your site adjusts to your selected OS settings</span>
-</span></span><span class="line"><span class="cl"><span class="c"># for light/dark mode. The first array element is the variant for light mode,</span>
-</span></span><span class="line"><span class="cl"><span class="c"># the second for dark mode.</span>
-</span></span><span class="line"><span class="cl"><span class="nx">themeVariantAuto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;relearn-light&#34;</span><span class="p">,</span> <span class="s2">&#34;relearn-dark&#34;</span> <span class="p">]</span>
-</span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl"><span class="c">#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span>
 </span></span><span class="line"><span class="cl"><span class="c"># General</span>
 </span></span><span class="line"><span class="cl"><span class="c"># These options are defining general, non visual behavior.</span>
@@ -551,8 +545,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/basics/customization/index.html b/basics/customization/index.html
index 3f37df9793..be98fad7a9 100644
--- a/basics/customization/index.html
+++ b/basics/customization/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/customization/index.html" rel="alternate" hreflang="pir">
     <link href="../../basics/customization/index.xml" rel="alternate" type="application/rss+xml" title="Customization :: Hugo Relearn Theme">
     <link href="../../basics/customization/index.print.html" rel="alternate" type="text/html" title="Customization :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -176,8 +176,8 @@
 <p>You can add a dedicated search page for your page by adding the <code>SEARCHPAGE</code> outputformat to your home page by adding the following lines in your <code>config.toml</code> file. This will cause Hugo to generate a new file <code>http://example.com/mysite/search.html</code>.</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">home</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;HTML&#34;</span><span class="p">,</span> <span class="s2">&#34;RSS&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCH&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCHPAGE&#34;</span><span class="p">]</span></span></span></code></pre></div><p>You can access this page by either clicking on the magnifier glass or by typing some search term and pressing <code>ENTER</code> inside of the menu&rsquo;s search box .</p>
-<p><a href="#R-image-82e62cf731946c5e06e4387b08649ba2" class="lightbox-link"><img src="../../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-82e62cf731946c5e06e4387b08649ba2"><img src="../../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-0d8adba30cf33f90e04372c07a5515db" class="lightbox-link"><img src="../../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-0d8adba30cf33f90e04372c07a5515db"><img src="../../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 <div class="box notices cstyle note">
   <div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Note</div>
@@ -218,8 +218,8 @@ appearance, you will have to configure the <code>landingPageName</code> for the
 </span></span><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Arrr! Homme&#34;</span>
 </span></span><span class="line"><span class="cl"><span class="p">...</span></span></span></code></pre></div><p>If this option is not configured for a specific language, they will get their default values:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Home&#34;</span></span></span></code></pre></div><p>The home button is going to look like this:</p>
-<p><a href="#R-image-023c5fcc2fb9e789508d876b1b28b0bc" class="lightbox-link"><img src="../../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-023c5fcc2fb9e789508d876b1b28b0bc"><img src="../../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f3f67cd71bc40395445aa7cc3e173d9e" class="lightbox-link"><img src="../../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f3f67cd71bc40395445aa7cc3e173d9e"><img src="../../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="social-media-meta-tags">Social Media Meta Tags</h2>
 <p>You can add social media meta tags for the <a href="https://gohugo.io/templates/internal/#open-graph" target="_blank">Open Graph</a> protocol and <a href="https://gohugo.io/templates/internal/#twitter-cards" target="_blank">Twitter Cards</a> to your site. These are configured as mentioned in the Hugo docs.</p>
 <h2 id="change-the-menu-width">Change the Menu Width</h2>
@@ -399,12 +399,12 @@ appearance, you will have to configure the <code>landingPageName</code> for the
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -494,9 +494,11 @@ appearance, you will have to configure the <code>landingPageName</code> for the
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -561,13 +563,13 @@ appearance, you will have to configure the <code>landingPageName</code> for the
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/basics/customization/index.print.html b/basics/customization/index.print.html
index 93e4ecaa59..cec653dcde 100644
--- a/basics/customization/index.print.html
+++ b/basics/customization/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/customization/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/customization/index.html" rel="canonical" type="text/html" title="Customization :: Hugo Relearn Theme">
     <link href="../../basics/customization/index.xml" rel="alternate" type="application/rss+xml" title="Customization :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -118,8 +118,8 @@
 <p>You can add a dedicated search page for your page by adding the <code>SEARCHPAGE</code> outputformat to your home page by adding the following lines in your <code>config.toml</code> file. This will cause Hugo to generate a new file <code>http://example.com/mysite/search.html</code>.</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">home</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;HTML&#34;</span><span class="p">,</span> <span class="s2">&#34;RSS&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCH&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCHPAGE&#34;</span><span class="p">]</span></span></span></code></pre></div><p>You can access this page by either clicking on the magnifier glass or by typing some search term and pressing <code>ENTER</code> inside of the menu&rsquo;s search box .</p>
-<p><a href="#R-image-82e62cf731946c5e06e4387b08649ba2" class="lightbox-link"><img src="../../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-82e62cf731946c5e06e4387b08649ba2"><img src="../../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-0d8adba30cf33f90e04372c07a5515db" class="lightbox-link"><img src="../../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-0d8adba30cf33f90e04372c07a5515db"><img src="../../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 <div class="box notices cstyle note">
   <div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Note</div>
@@ -160,8 +160,8 @@ appearance, you will have to configure the <code>landingPageName</code> for the
 </span></span><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Arrr! Homme&#34;</span>
 </span></span><span class="line"><span class="cl"><span class="p">...</span></span></span></code></pre></div><p>If this option is not configured for a specific language, they will get their default values:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Home&#34;</span></span></span></code></pre></div><p>The home button is going to look like this:</p>
-<p><a href="#R-image-023c5fcc2fb9e789508d876b1b28b0bc" class="lightbox-link"><img src="../../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-023c5fcc2fb9e789508d876b1b28b0bc"><img src="../../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f3f67cd71bc40395445aa7cc3e173d9e" class="lightbox-link"><img src="../../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f3f67cd71bc40395445aa7cc3e173d9e"><img src="../../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="social-media-meta-tags">Social Media Meta Tags</h2>
 <p>You can add social media meta tags for the <a href="https://gohugo.io/templates/internal/#open-graph" target="_blank">Open Graph</a> protocol and <a href="https://gohugo.io/templates/internal/#twitter-cards" target="_blank">Twitter Cards</a> to your site. These are configured as mentioned in the Hugo docs.</p>
 <h2 id="change-the-menu-width">Change the Menu Width</h2>
@@ -260,8 +260,8 @@ appearance, you will have to configure the <code>landingPageName</code> for the
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/basics/generator/index.html b/basics/generator/index.html
index 690fd66232..c7362a2d10 100644
--- a/basics/generator/index.html
+++ b/basics/generator/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/generator/index.html" rel="alternate" hreflang="pir">
     <link href="../../basics/generator/index.xml" rel="alternate" type="application/rss+xml" title="Stylesheet generator :: Hugo Relearn Theme">
     <link href="../../basics/generator/index.print.html" rel="alternate" type="text/html" title="Stylesheet generator :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -135,13 +135,13 @@
 <p>This interactive tool may help you to generate your own color variant stylesheet.</p>
 
 <div class="expand">
-    <input type="checkbox" id="R-expand-6a6994a74c1862a2e4c6d2d290a82bf0" aria-controls="R-expandcontent-6a6994a74c1862a2e4c6d2d290a82bf0" >
-    <label class="expand-label" for="R-expand-6a6994a74c1862a2e4c6d2d290a82bf0" >
+    <input type="checkbox" id="R-expand-87a7efe1d092fde815cae8627f43bc7f" aria-controls="R-expandcontent-87a7efe1d092fde815cae8627f43bc7f" >
+    <label class="expand-label" for="R-expand-87a7efe1d092fde815cae8627f43bc7f" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show usage instructions
     </label>
-    <div id="R-expandcontent-6a6994a74c1862a2e4c6d2d290a82bf0" class="expand-content">
+    <div id="R-expandcontent-87a7efe1d092fde815cae8627f43bc7f" class="expand-content">
 
 <p>To get started, first select a color variant from the variant selector in the lower left sidebar that fits you best as a starting point.</p>
 <p>The graph is interactive and reflect the current colors. You can click on any of the colored boxes to adjust the respective color. The graph <strong>and the page</strong> will update accordingly.</p>
@@ -279,12 +279,12 @@ window.variants && variants.generator( '#R-vargenerator' );
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -374,9 +374,11 @@ window.variants && variants.generator( '#R-vargenerator' );
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -441,27 +443,27 @@ window.variants && variants.generator( '#R-vargenerator' );
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-color.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-dispatch.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-drag.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-ease.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-interpolate.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-selection.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-timer.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-transition.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-zoom.min.js?1700525733" defer></script>
-    <script src="../../js/js-yaml.min.js?1700525733" defer></script>
-    <script src="../../js/mermaid.min.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/d3/d3-color.min.js?1700697951" defer></script>
+    <script src="../../js/d3/d3-dispatch.min.js?1700697951" defer></script>
+    <script src="../../js/d3/d3-drag.min.js?1700697951" defer></script>
+    <script src="../../js/d3/d3-ease.min.js?1700697951" defer></script>
+    <script src="../../js/d3/d3-interpolate.min.js?1700697951" defer></script>
+    <script src="../../js/d3/d3-selection.min.js?1700697951" defer></script>
+    <script src="../../js/d3/d3-timer.min.js?1700697951" defer></script>
+    <script src="../../js/d3/d3-transition.min.js?1700697951" defer></script>
+    <script src="../../js/d3/d3-zoom.min.js?1700697951" defer></script>
+    <script src="../../js/js-yaml.min.js?1700697951" defer></script>
+    <script src="../../js/mermaid.min.js?1700697951" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/basics/generator/index.print.html b/basics/generator/index.print.html
index 8f6ac93e33..ccf7fe6e52 100644
--- a/basics/generator/index.print.html
+++ b/basics/generator/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/generator/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/generator/index.html" rel="canonical" type="text/html" title="Stylesheet generator :: Hugo Relearn Theme">
     <link href="../../basics/generator/index.xml" rel="alternate" type="application/rss+xml" title="Stylesheet generator :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -96,13 +96,13 @@
 <p>This interactive tool may help you to generate your own color variant stylesheet.</p>
 
 <div class="expand">
-    <input type="checkbox" id="R-expand-6a6994a74c1862a2e4c6d2d290a82bf0" aria-controls="R-expandcontent-6a6994a74c1862a2e4c6d2d290a82bf0" >
-    <label class="expand-label" for="R-expand-6a6994a74c1862a2e4c6d2d290a82bf0" >
+    <input type="checkbox" id="R-expand-87a7efe1d092fde815cae8627f43bc7f" aria-controls="R-expandcontent-87a7efe1d092fde815cae8627f43bc7f" >
+    <label class="expand-label" for="R-expand-87a7efe1d092fde815cae8627f43bc7f" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show usage instructions
     </label>
-    <div id="R-expandcontent-6a6994a74c1862a2e4c6d2d290a82bf0" class="expand-content">
+    <div id="R-expandcontent-87a7efe1d092fde815cae8627f43bc7f" class="expand-content">
 
 <p>To get started, first select a color variant from the variant selector in the lower left sidebar that fits you best as a starting point.</p>
 <p>The graph is interactive and reflect the current colors. You can click on any of the colored boxes to adjust the respective color. The graph <strong>and the page</strong> will update accordingly.</p>
@@ -159,22 +159,22 @@ window.variants && variants.generator( '#R-vargenerator' );
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-color.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-dispatch.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-drag.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-ease.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-interpolate.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-selection.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-timer.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-transition.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-zoom.min.js?1700525733" defer></script>
-    <script src="../../js/js-yaml.min.js?1700525733" defer></script>
-    <script src="../../js/mermaid.min.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/d3/d3-color.min.js?1700697952" defer></script>
+    <script src="../../js/d3/d3-dispatch.min.js?1700697952" defer></script>
+    <script src="../../js/d3/d3-drag.min.js?1700697952" defer></script>
+    <script src="../../js/d3/d3-ease.min.js?1700697952" defer></script>
+    <script src="../../js/d3/d3-interpolate.min.js?1700697952" defer></script>
+    <script src="../../js/d3/d3-selection.min.js?1700697952" defer></script>
+    <script src="../../js/d3/d3-timer.min.js?1700697952" defer></script>
+    <script src="../../js/d3/d3-transition.min.js?1700697952" defer></script>
+    <script src="../../js/d3/d3-zoom.min.js?1700697952" defer></script>
+    <script src="../../js/js-yaml.min.js?1700697952" defer></script>
+    <script src="../../js/mermaid.min.js?1700697952" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/basics/history/index.html b/basics/history/index.html
index 636641a429..a4141a3e01 100644
--- a/basics/history/index.html
+++ b/basics/history/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/history/index.html" rel="alternate" hreflang="pir">
     <link href="../../basics/history/index.xml" rel="alternate" type="application/rss+xml" title="History :: Hugo Relearn Theme">
     <link href="../../basics/history/index.print.html" rel="alternate" type="text/html" title="History :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -2255,12 +2255,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -2350,9 +2350,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -2417,13 +2419,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/basics/history/index.print.html b/basics/history/index.print.html
index 532d6d3528..45be07a7cd 100644
--- a/basics/history/index.print.html
+++ b/basics/history/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/history/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/history/index.html" rel="canonical" type="text/html" title="History :: Hugo Relearn Theme">
     <link href="../../basics/history/index.xml" rel="alternate" type="application/rss+xml" title="History :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -1426,8 +1426,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/basics/index.html b/basics/index.html
index e750874135..a357c29aa8 100644
--- a/basics/index.html
+++ b/basics/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/index.html" rel="alternate" hreflang="pir">
     <link href="../basics/index.xml" rel="alternate" type="application/rss+xml" title="Basics :: Hugo Relearn Theme">
     <link href="../basics/index.print.html" rel="alternate" type="text/html" title="Basics :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../js/url.js?1700525732"></script>
-    <script src="../js/variant.js?1700525732"></script>
+    <link href="../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../js/url.js?1700697951"></script>
+    <script src="../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -222,12 +222,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../js/search.js?1700525733" defer></script>
+        <script src="../js/auto-complete.js?1700697951" defer></script>
+        <script src="../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -317,9 +317,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -384,13 +386,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../js/github-buttons.js?1700525733"></script>
+          <script async src="../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../js/theme.js?1700525733" defer></script>
+    <script src="../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/basics/index.print.html b/basics/index.print.html
index a721442d15..997f0e2416 100644
--- a/basics/index.print.html
+++ b/basics/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/index.html" rel="canonical" type="text/html" title="Basics :: Hugo Relearn Theme">
     <link href="../basics/index.xml" rel="alternate" type="application/rss+xml" title="Basics :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../js/url.js?1700525733"></script>
-    <script src="../js/variant.js?1700525733"></script>
+    <link href="../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../js/url.js?1700697952"></script>
+    <script src="../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -129,8 +129,8 @@
 <p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> The light themes have a bit more contrast for content text and headings. Also the syntaxhighlighting was changed to the more colorful MonokaiLight. This brings the syntaxhighlightning in sync with the corresponding dark theme variants, which are using Monokai.</p>
 </li>
 <li>
-<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You now can configure options for every theme variant in your <code>config.toml</code>. This allows for optional <a href="../basics/branding/index.html#theme-variant-advanced">advanced functionality</a>. You don&rsquo;t need to change anything as the old configuration options will still work (but may generate warnings now).</p>
-<p>The advanced functionality allows you to set an explicit name for a theme variant, set different colors (if you are using monochrome SVGs) or even different icons (handy if you want to adjust colors for PNGs, GIFs or JPGs) and provide an extended way to configure the automatic switch of variants based on your OS settings.</p>
+<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You now can configure additional options for every theme variant in your <code>config.toml</code>. This allows for optional <a href="../basics/branding/index.html#theme-variant-advanced">advanced functionality</a>. You don&rsquo;t need to change anything as the old configuration options will still work (but may generate warnings now).</p>
+<p>The advanced functionality allows you to set an explicit name for a theme variant, set different colors (if you are using monochrome SVGs) or even different icons (handy if you want to adjust colors for PNGs, GIFs or JPGs) and now allows for multiple auto mode variants that adjust to the light/dark preference of your OS settings.</p>
 </li>
 </ul>
 <hr>
@@ -984,8 +984,8 @@
 
 <p>Thanks to the simplicity of Hugo, this page is as empty as this theme needs requirements.</p>
 <p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> of the <a href="https://gohugo.io/getting-started/installing/" target="_blank">Hugo binary</a> for your OS (Windows, Linux, Mac).</p>
-<p><a href="#R-image-373b9be6c549ddbcbdf8704134fbc7e6" class="lightbox-link"><img src="../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-373b9be6c549ddbcbdf8704134fbc7e6"><img src="../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-33b7d0775a1135452e9397d6288c7e9b" class="lightbox-link"><img src="../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-33b7d0775a1135452e9397d6288c7e9b"><img src="../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
             <footer class="footline">
 <div class=" taxonomy-categories term-list cstyle  " title="Categories" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
@@ -1033,8 +1033,8 @@
 </span></span><span class="line"><span class="cl"><span class="gh"># Basics
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>
 </span></span><span class="line"><span class="cl">Discover what this Hugo theme is all about and the core concepts behind it.</span></span></code></pre></div><p>renders as</p>
-<p><a href="#R-image-d8edbe7ccae2d3cdc95f7a4674b0a75e" class="lightbox-link"><img src="../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-d8edbe7ccae2d3cdc95f7a4674b0a75e"><img src="../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-1caa1992878aeb081a8865aac1f75a49" class="lightbox-link"><img src="../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-1caa1992878aeb081a8865aac1f75a49"><img src="../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>The Relearn theme provides archetypes to create skeletons for your website. Begin by creating your first chapter page with the following command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter basics/_index.md</span></span></code></pre></div><p>By opening the given file, you should see the property <code>chapter=true</code> on top, meaning this page is a <em>chapter</em>.</p>
 <p>By default all chapters and pages are created as a draft. If you want to render these pages, remove the property <code>draft: true</code> from the metadata.</p>
@@ -1081,13 +1081,13 @@
 <p>Note that some of these options are explained in detail in other sections of this documentation.</p>
 
   
-<div class="tab-panel" data-tab-group="00480a48a09d05bd21c01fb64fb62010">
+<div class="tab-panel" data-tab-group="8cb9d10357093b8b6270287c8d9f96d5">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('00480a48a09d05bd21c01fb64fb62010','configtoml')"
+      onclick="switchTab('8cb9d10357093b8b6270287c8d9f96d5','configtoml')"
     >
       <span class="tab-nav-text">config.toml</span>
     </button>
@@ -1162,26 +1162,20 @@
 </span></span><span class="line"><span class="cl"><span class="c"># You can also define your own variants. See the docs how this works. Also,</span>
 </span></span><span class="line"><span class="cl"><span class="c"># the docs provide an interactive theme generator to help you with this task.</span>
 </span></span><span class="line"><span class="cl"><span class="nx">themeVariant</span> <span class="p">=</span> <span class="p">[</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;auto&#34;</span>          <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span> <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>  <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-light&#34;</span>     <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-dark&#34;</span>      <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;neon&#34;</span>          <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;learn&#34;</span>         <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;blue&#34;</span>          <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;green&#34;</span>         <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;red&#34;</span>           <span class="p">}</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-auto&#34;</span><span class="p">,</span>  <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Relearn Light/Dark&#34;</span><span class="p">,</span> <span class="nx">auto</span> <span class="p">=</span> <span class="p">[]</span> <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span>  <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>   <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-bright&#34;</span> <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-auto&#34;</span><span class="p">,</span>      <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Zen Light/Dark&#34;</span><span class="p">,</span> <span class="nx">auto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;zen-light&#34;</span><span class="p">,</span> <span class="s2">&#34;zen-dark&#34;</span> <span class="p">]</span> <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-light&#34;</span>      <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-dark&#34;</span>       <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;neon&#34;</span>           <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;learn&#34;</span>          <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;blue&#34;</span>           <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;green&#34;</span>          <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;red&#34;</span>            <span class="p">}</span>
 </span></span><span class="line"><span class="cl"><span class="p">]</span>
 </span></span><span class="line"><span class="cl">
-</span></span><span class="line"><span class="cl"><span class="c"># The color variants used for auto mode.</span>
-</span></span><span class="line"><span class="cl"><span class="c"># Default: [ &#34;relearn-light&#34;, &#34;relearn-dark&#34; ], overwritten by the first</span>
-</span></span><span class="line"><span class="cl"><span class="c"># two non-auto options of your `themeVariant` option if present.</span>
-</span></span><span class="line"><span class="cl"><span class="c"># The auto variant defines how your site adjusts to your selected OS settings</span>
-</span></span><span class="line"><span class="cl"><span class="c"># for light/dark mode. The first array element is the variant for light mode,</span>
-</span></span><span class="line"><span class="cl"><span class="c"># the second for dark mode.</span>
-</span></span><span class="line"><span class="cl"><span class="nx">themeVariantAuto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;relearn-light&#34;</span><span class="p">,</span> <span class="s2">&#34;relearn-dark&#34;</span> <span class="p">]</span>
-</span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl"><span class="c">#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span>
 </span></span><span class="line"><span class="cl"><span class="c"># General</span>
 </span></span><span class="line"><span class="cl"><span class="c"># These options are defining general, non visual behavior.</span>
@@ -1562,7 +1556,7 @@
 </div>
 </div>
 <h2 id="adjust-to-os-settings">Adjust to OS Settings</h2>
-<p>You can also cause the site to adjust to your OS settings for light/dark mode. Just set the <code>themeVariant</code> to <code>auto</code>. That&rsquo;s it.</p>
+<p>You can also cause the site to adjust to your OS settings for light/dark mode. Just set the <code>themeVariant</code> to <code>auto</code> to become an auto mode variant. That&rsquo;s it.</p>
 <p>You can use the <code>auto</code> value with the single or multiple variants option. If you are using multiple variants, you can drop <code>auto</code> at any position in the option&rsquo;s array, but usually it makes sense to set it in the first position and make it the default.</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">themeVariant</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;auto&#34;</span><span class="p">,</span> <span class="s2">&#34;red&#34;</span> <span class="p">]</span></span></span></code></pre></div><p>If you don&rsquo;t configure anything else, the theme will default to use <code>relearn-light</code> for light mode and <code>relearn-dark</code> for dark mode. These defaults are overwritten by the first two non-auto options of your <code>themeVariant</code> option if present.</p>
@@ -1619,9 +1613,33 @@
 <td>see notes</td>
 <td>The name to be displayed in the variant selector. If not set, the identifier is used in a human readable form.</td>
 </tr>
+<tr>
+<td>auto</td>
+<td><em>&lt;empty&gt;</em></td>
+<td>If set, the variant is treated as an <a href="#adjust-to-os-settings">auto mode variant</a>. It has the same behavior as the <code>themeVariantAuto</code> option. The first entry in the array is the color variant for light mode, the second for dark mode. Defining auto mode variants with the advanced options has the benefit that you can now have multiple auto mode variants instead of just one with the simple options.</td>
+</tr>
 </tbody>
 </table>
-
+<h3 id="example-configuration-of-this-site">Example Configuration of This Site</h3>
+<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-auto&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Relearn Light/Dark&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">auto</span> <span class="p">=</span> <span class="p">[]</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-auto&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Zen Light/Dark&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">auto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;zen-light&#34;</span><span class="p">,</span> <span class="s2">&#34;zen-dark&#34;</span> <span class="p">]</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-light&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-dark&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;neon&#34;</span></span></span></code></pre></div>
             <footer class="footline">
 <div class=" taxonomy-categories term-list cstyle  " title="Categories" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
   <i class="fa-fw fas fa-layer-group"></i>
@@ -1663,8 +1681,8 @@
 <p>You can add a dedicated search page for your page by adding the <code>SEARCHPAGE</code> outputformat to your home page by adding the following lines in your <code>config.toml</code> file. This will cause Hugo to generate a new file <code>http://example.com/mysite/search.html</code>.</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">home</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;HTML&#34;</span><span class="p">,</span> <span class="s2">&#34;RSS&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCH&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCHPAGE&#34;</span><span class="p">]</span></span></span></code></pre></div><p>You can access this page by either clicking on the magnifier glass or by typing some search term and pressing <code>ENTER</code> inside of the menu&rsquo;s search box .</p>
-<p><a href="#R-image-82e62cf731946c5e06e4387b08649ba2" class="lightbox-link"><img src="../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-82e62cf731946c5e06e4387b08649ba2"><img src="../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-0d8adba30cf33f90e04372c07a5515db" class="lightbox-link"><img src="../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-0d8adba30cf33f90e04372c07a5515db"><img src="../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 <div class="box notices cstyle note">
   <div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Note</div>
@@ -1705,8 +1723,8 @@ appearance, you will have to configure the <code>landingPageName</code> for the
 </span></span><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Arrr! Homme&#34;</span>
 </span></span><span class="line"><span class="cl"><span class="p">...</span></span></span></code></pre></div><p>If this option is not configured for a specific language, they will get their default values:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Home&#34;</span></span></span></code></pre></div><p>The home button is going to look like this:</p>
-<p><a href="#R-image-023c5fcc2fb9e789508d876b1b28b0bc" class="lightbox-link"><img src="../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-023c5fcc2fb9e789508d876b1b28b0bc"><img src="../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f3f67cd71bc40395445aa7cc3e173d9e" class="lightbox-link"><img src="../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f3f67cd71bc40395445aa7cc3e173d9e"><img src="../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="social-media-meta-tags">Social Media Meta Tags</h2>
 <p>You can add social media meta tags for the <a href="https://gohugo.io/templates/internal/#open-graph" target="_blank">Open Graph</a> protocol and <a href="https://gohugo.io/templates/internal/#twitter-cards" target="_blank">Twitter Cards</a> to your site. These are configured as mentioned in the Hugo docs.</p>
 <h2 id="change-the-menu-width">Change the Menu Width</h2>
@@ -1810,13 +1828,13 @@ appearance, you will have to configure the <code>landingPageName</code> for the
 <p>This interactive tool may help you to generate your own color variant stylesheet.</p>
 
 <div class="expand">
-    <input type="checkbox" id="R-expand-6a6994a74c1862a2e4c6d2d290a82bf0" aria-controls="R-expandcontent-6a6994a74c1862a2e4c6d2d290a82bf0" >
-    <label class="expand-label" for="R-expand-6a6994a74c1862a2e4c6d2d290a82bf0" >
+    <input type="checkbox" id="R-expand-87a7efe1d092fde815cae8627f43bc7f" aria-controls="R-expandcontent-87a7efe1d092fde815cae8627f43bc7f" >
+    <label class="expand-label" for="R-expand-87a7efe1d092fde815cae8627f43bc7f" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show usage instructions
     </label>
-    <div id="R-expandcontent-6a6994a74c1862a2e4c6d2d290a82bf0" class="expand-content">
+    <div id="R-expandcontent-87a7efe1d092fde815cae8627f43bc7f" class="expand-content">
 
 <p>To get started, first select a color variant from the variant selector in the lower left sidebar that fits you best as a starting point.</p>
 <p>The graph is interactive and reflect the current colors. You can click on any of the colored boxes to adjust the respective color. The graph <strong>and the page</strong> will update accordingly.</p>
@@ -1876,8 +1894,8 @@ window.variants && variants.generator( '#R-vargenerator' );
 <h1 id="topbar-modification">Topbar Modification</h1>
 
 <p>The theme comes with a reasonably configured topbar.</p>
-<p><a href="#R-image-c745e394038b6004e5ff1647cb24029d" class="lightbox-link"><img src="../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-c745e394038b6004e5ff1647cb24029d"><img src="../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-147ab4cae608f96fdeffc348bd98d585" class="lightbox-link"><img src="../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-147ab4cae608f96fdeffc348bd98d585"><img src="../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>Nevertheless, your requirements may differ from this configuration. Luckily the theme got you covered as the themebar, its buttons and the functionality behind these buttons is fully configurable by you.</p>
 
 <div class="box notices cstyle tip">
@@ -1889,8 +1907,8 @@ window.variants && variants.generator( '#R-vargenerator' );
 </div>
 <h2 id="areas">Areas</h2>
 <p>The default configuration comes with three predefined areas that may contain an arbitrary set of buttons.</p>
-<p><a href="#R-image-690c1cccb3d28b84a260c167f50c1895" class="lightbox-link"><img src="../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-690c1cccb3d28b84a260c167f50c1895"><img src="../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-78ef8f66663b74e79f03c9820f21a861" class="lightbox-link"><img src="../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-78ef8f66663b74e79f03c9820f21a861"><img src="../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <ul>
 <li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/start.html" target="_blank"><strong>start</strong></a>: shown between menu and breadcrumb</li>
 <li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/end.html" target="_blank"><strong>end</strong></a>: shown on the opposite breadcrumb side in comparison to the <em>start</em> area</li>
@@ -3544,22 +3562,22 @@ window.variants && variants.generator( '#R-vargenerator' );
         </div>
       </main>
     </div>
-    <script src="../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../js/d3/d3-color.min.js?1700525733" defer></script>
-    <script src="../js/d3/d3-dispatch.min.js?1700525733" defer></script>
-    <script src="../js/d3/d3-drag.min.js?1700525733" defer></script>
-    <script src="../js/d3/d3-ease.min.js?1700525733" defer></script>
-    <script src="../js/d3/d3-interpolate.min.js?1700525733" defer></script>
-    <script src="../js/d3/d3-selection.min.js?1700525733" defer></script>
-    <script src="../js/d3/d3-timer.min.js?1700525733" defer></script>
-    <script src="../js/d3/d3-transition.min.js?1700525733" defer></script>
-    <script src="../js/d3/d3-zoom.min.js?1700525733" defer></script>
-    <script src="../js/js-yaml.min.js?1700525733" defer></script>
-    <script src="../js/mermaid.min.js?1700525733" defer></script>
+    <script src="../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../js/d3/d3-color.min.js?1700697952" defer></script>
+    <script src="../js/d3/d3-dispatch.min.js?1700697952" defer></script>
+    <script src="../js/d3/d3-drag.min.js?1700697952" defer></script>
+    <script src="../js/d3/d3-ease.min.js?1700697952" defer></script>
+    <script src="../js/d3/d3-interpolate.min.js?1700697952" defer></script>
+    <script src="../js/d3/d3-selection.min.js?1700697952" defer></script>
+    <script src="../js/d3/d3-timer.min.js?1700697952" defer></script>
+    <script src="../js/d3/d3-transition.min.js?1700697952" defer></script>
+    <script src="../js/d3/d3-zoom.min.js?1700697952" defer></script>
+    <script src="../js/js-yaml.min.js?1700697952" defer></script>
+    <script src="../js/mermaid.min.js?1700697952" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../js/theme.js?1700525733" defer></script>
+    <script src="../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/basics/installation/index.html b/basics/installation/index.html
index cc261718ab..096fdda167 100644
--- a/basics/installation/index.html
+++ b/basics/installation/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/installation/index.html" rel="alternate" hreflang="pir">
     <link href="../../basics/installation/index.xml" rel="alternate" type="application/rss+xml" title="Installation :: Hugo Relearn Theme">
     <link href="../../basics/installation/index.print.html" rel="alternate" type="text/html" title="Installation :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -178,8 +178,8 @@
 </span></span><span class="line"><span class="cl"><span class="gh"># Basics
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>
 </span></span><span class="line"><span class="cl">Discover what this Hugo theme is all about and the core concepts behind it.</span></span></code></pre></div><p>renders as</p>
-<p><a href="#R-image-d8edbe7ccae2d3cdc95f7a4674b0a75e" class="lightbox-link"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-d8edbe7ccae2d3cdc95f7a4674b0a75e"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-1caa1992878aeb081a8865aac1f75a49" class="lightbox-link"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-1caa1992878aeb081a8865aac1f75a49"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>The Relearn theme provides archetypes to create skeletons for your website. Begin by creating your first chapter page with the following command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter basics/_index.md</span></span></code></pre></div><p>By opening the given file, you should see the property <code>chapter=true</code> on top, meaning this page is a <em>chapter</em>.</p>
 <p>By default all chapters and pages are created as a draft. If you want to render these pages, remove the property <code>draft: true</code> from the metadata.</p>
@@ -296,12 +296,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -391,9 +391,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -458,13 +460,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/basics/installation/index.print.html b/basics/installation/index.print.html
index 06b23b46b3..6f389eb04e 100644
--- a/basics/installation/index.print.html
+++ b/basics/installation/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/installation/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/installation/index.html" rel="canonical" type="text/html" title="Installation :: Hugo Relearn Theme">
     <link href="../../basics/installation/index.xml" rel="alternate" type="application/rss+xml" title="Installation :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -124,8 +124,8 @@
 </span></span><span class="line"><span class="cl"><span class="gh"># Basics
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>
 </span></span><span class="line"><span class="cl">Discover what this Hugo theme is all about and the core concepts behind it.</span></span></code></pre></div><p>renders as</p>
-<p><a href="#R-image-d8edbe7ccae2d3cdc95f7a4674b0a75e" class="lightbox-link"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-d8edbe7ccae2d3cdc95f7a4674b0a75e"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-1caa1992878aeb081a8865aac1f75a49" class="lightbox-link"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-1caa1992878aeb081a8865aac1f75a49"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>The Relearn theme provides archetypes to create skeletons for your website. Begin by creating your first chapter page with the following command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter basics/_index.md</span></span></code></pre></div><p>By opening the given file, you should see the property <code>chapter=true</code> on top, meaning this page is a <em>chapter</em>.</p>
 <p>By default all chapters and pages are created as a draft. If you want to render these pages, remove the property <code>draft: true</code> from the metadata.</p>
@@ -161,8 +161,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/basics/migration/index.html b/basics/migration/index.html
index 732a81fe16..12ead4c674 100644
--- a/basics/migration/index.html
+++ b/basics/migration/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/migration/index.html" rel="alternate" hreflang="pir">
     <link href="../../basics/migration/index.xml" rel="alternate" type="application/rss+xml" title="What&#39;s New :: Hugo Relearn Theme">
     <link href="../../basics/migration/index.print.html" rel="alternate" type="text/html" title="What&#39;s New :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -205,8 +205,8 @@
 <p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> The light themes have a bit more contrast for content text and headings. Also the syntaxhighlighting was changed to the more colorful MonokaiLight. This brings the syntaxhighlightning in sync with the corresponding dark theme variants, which are using Monokai.</p>
 </li>
 <li>
-<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You now can configure options for every theme variant in your <code>config.toml</code>. This allows for optional <a href="../../basics/branding/index.html#theme-variant-advanced">advanced functionality</a>. You don&rsquo;t need to change anything as the old configuration options will still work (but may generate warnings now).</p>
-<p>The advanced functionality allows you to set an explicit name for a theme variant, set different colors (if you are using monochrome SVGs) or even different icons (handy if you want to adjust colors for PNGs, GIFs or JPGs) and provide an extended way to configure the automatic switch of variants based on your OS settings.</p>
+<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You now can configure additional options for every theme variant in your <code>config.toml</code>. This allows for optional <a href="../../basics/branding/index.html#theme-variant-advanced">advanced functionality</a>. You don&rsquo;t need to change anything as the old configuration options will still work (but may generate warnings now).</p>
+<p>The advanced functionality allows you to set an explicit name for a theme variant, set different colors (if you are using monochrome SVGs) or even different icons (handy if you want to adjust colors for PNGs, GIFs or JPGs) and now allows for multiple auto mode variants that adjust to the light/dark preference of your OS settings.</p>
 </li>
 </ul>
 <hr>
@@ -1137,12 +1137,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -1232,9 +1232,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -1299,13 +1301,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/basics/migration/index.print.html b/basics/migration/index.print.html
index 1f43d52714..e2540e1134 100644
--- a/basics/migration/index.print.html
+++ b/basics/migration/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/migration/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/migration/index.html" rel="canonical" type="text/html" title="What&#39;s New :: Hugo Relearn Theme">
     <link href="../../basics/migration/index.xml" rel="alternate" type="application/rss+xml" title="What&#39;s New :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -116,8 +116,8 @@
 <p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> The light themes have a bit more contrast for content text and headings. Also the syntaxhighlighting was changed to the more colorful MonokaiLight. This brings the syntaxhighlightning in sync with the corresponding dark theme variants, which are using Monokai.</p>
 </li>
 <li>
-<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You now can configure options for every theme variant in your <code>config.toml</code>. This allows for optional <a href="../../basics/branding/index.html#theme-variant-advanced">advanced functionality</a>. You don&rsquo;t need to change anything as the old configuration options will still work (but may generate warnings now).</p>
-<p>The advanced functionality allows you to set an explicit name for a theme variant, set different colors (if you are using monochrome SVGs) or even different icons (handy if you want to adjust colors for PNGs, GIFs or JPGs) and provide an extended way to configure the automatic switch of variants based on your OS settings.</p>
+<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You now can configure additional options for every theme variant in your <code>config.toml</code>. This allows for optional <a href="../../basics/branding/index.html#theme-variant-advanced">advanced functionality</a>. You don&rsquo;t need to change anything as the old configuration options will still work (but may generate warnings now).</p>
+<p>The advanced functionality allows you to set an explicit name for a theme variant, set different colors (if you are using monochrome SVGs) or even different icons (handy if you want to adjust colors for PNGs, GIFs or JPGs) and now allows for multiple auto mode variants that adjust to the light/dark preference of your OS settings.</p>
 </li>
 </ul>
 <hr>
@@ -967,8 +967,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/basics/requirements/index.html b/basics/requirements/index.html
index d2eee2f4eb..4389a5947a 100644
--- a/basics/requirements/index.html
+++ b/basics/requirements/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/requirements/index.html" rel="alternate" hreflang="pir">
     <link href="../../basics/requirements/index.xml" rel="alternate" type="application/rss+xml" title="Requirements :: Hugo Relearn Theme">
     <link href="../../basics/requirements/index.print.html" rel="alternate" type="text/html" title="Requirements :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -125,8 +125,8 @@
 
 <p>Thanks to the simplicity of Hugo, this page is as empty as this theme needs requirements.</p>
 <p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> of the <a href="https://gohugo.io/getting-started/installing/" target="_blank">Hugo binary</a> for your OS (Windows, Linux, Mac).</p>
-<p><a href="#R-image-373b9be6c549ddbcbdf8704134fbc7e6" class="lightbox-link"><img src="../../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-373b9be6c549ddbcbdf8704134fbc7e6"><img src="../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-33b7d0775a1135452e9397d6288c7e9b" class="lightbox-link"><img src="../../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-33b7d0775a1135452e9397d6288c7e9b"><img src="../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
             <footer class="footline">
 <div class=" taxonomy-categories term-list cstyle  " title="Categories" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
@@ -222,12 +222,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -317,9 +317,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -384,13 +386,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/basics/requirements/index.print.html b/basics/requirements/index.print.html
index daf4c9e7d3..824e26cce0 100644
--- a/basics/requirements/index.print.html
+++ b/basics/requirements/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/requirements/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/requirements/index.html" rel="canonical" type="text/html" title="Requirements :: Hugo Relearn Theme">
     <link href="../../basics/requirements/index.xml" rel="alternate" type="application/rss+xml" title="Requirements :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -95,8 +95,8 @@
 
 <p>Thanks to the simplicity of Hugo, this page is as empty as this theme needs requirements.</p>
 <p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> of the <a href="https://gohugo.io/getting-started/installing/" target="_blank">Hugo binary</a> for your OS (Windows, Linux, Mac).</p>
-<p><a href="#R-image-373b9be6c549ddbcbdf8704134fbc7e6" class="lightbox-link"><img src="../../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-373b9be6c549ddbcbdf8704134fbc7e6"><img src="../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-33b7d0775a1135452e9397d6288c7e9b" class="lightbox-link"><img src="../../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-33b7d0775a1135452e9397d6288c7e9b"><img src="../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
             <footer class="footline">
 <div class=" taxonomy-categories term-list cstyle  " title="Categories" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
@@ -111,8 +111,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/basics/topbar/index.html b/basics/topbar/index.html
index 275d48861e..1ed39d4567 100644
--- a/basics/topbar/index.html
+++ b/basics/topbar/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/topbar/index.html" rel="alternate" hreflang="pir">
     <link href="../../basics/topbar/index.xml" rel="alternate" type="application/rss+xml" title="Topbar Modification :: Hugo Relearn Theme">
     <link href="../../basics/topbar/index.print.html" rel="alternate" type="text/html" title="Topbar Modification :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -154,8 +154,8 @@
 <h1 id="topbar-modification">Topbar Modification</h1>
 
 <p>The theme comes with a reasonably configured topbar.</p>
-<p><a href="#R-image-c745e394038b6004e5ff1647cb24029d" class="lightbox-link"><img src="../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-c745e394038b6004e5ff1647cb24029d"><img src="../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-147ab4cae608f96fdeffc348bd98d585" class="lightbox-link"><img src="../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-147ab4cae608f96fdeffc348bd98d585"><img src="../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>Nevertheless, your requirements may differ from this configuration. Luckily the theme got you covered as the themebar, its buttons and the functionality behind these buttons is fully configurable by you.</p>
 
 <div class="box notices cstyle tip">
@@ -167,8 +167,8 @@
 </div>
 <h2 id="areas">Areas</h2>
 <p>The default configuration comes with three predefined areas that may contain an arbitrary set of buttons.</p>
-<p><a href="#R-image-690c1cccb3d28b84a260c167f50c1895" class="lightbox-link"><img src="../../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-690c1cccb3d28b84a260c167f50c1895"><img src="../../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-78ef8f66663b74e79f03c9820f21a861" class="lightbox-link"><img src="../../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-78ef8f66663b74e79f03c9820f21a861"><img src="../../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <ul>
 <li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/start.html" target="_blank"><strong>start</strong></a>: shown between menu and breadcrumb</li>
 <li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/end.html" target="_blank"><strong>end</strong></a>: shown on the opposite breadcrumb side in comparison to the <em>start</em> area</li>
@@ -567,12 +567,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -662,9 +662,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -729,13 +731,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/basics/topbar/index.print.html b/basics/topbar/index.print.html
index f6bffb294b..97023142c2 100644
--- a/basics/topbar/index.print.html
+++ b/basics/topbar/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/topbar/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/topbar/index.html" rel="canonical" type="text/html" title="Topbar Modification :: Hugo Relearn Theme">
     <link href="../../basics/topbar/index.xml" rel="alternate" type="application/rss+xml" title="Topbar Modification :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -94,8 +94,8 @@
 <h1 id="topbar-modification">Topbar Modification</h1>
 
 <p>The theme comes with a reasonably configured topbar.</p>
-<p><a href="#R-image-c745e394038b6004e5ff1647cb24029d" class="lightbox-link"><img src="../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-c745e394038b6004e5ff1647cb24029d"><img src="../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-147ab4cae608f96fdeffc348bd98d585" class="lightbox-link"><img src="../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-147ab4cae608f96fdeffc348bd98d585"><img src="../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>Nevertheless, your requirements may differ from this configuration. Luckily the theme got you covered as the themebar, its buttons and the functionality behind these buttons is fully configurable by you.</p>
 
 <div class="box notices cstyle tip">
@@ -107,8 +107,8 @@
 </div>
 <h2 id="areas">Areas</h2>
 <p>The default configuration comes with three predefined areas that may contain an arbitrary set of buttons.</p>
-<p><a href="#R-image-690c1cccb3d28b84a260c167f50c1895" class="lightbox-link"><img src="../../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-690c1cccb3d28b84a260c167f50c1895"><img src="../../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-78ef8f66663b74e79f03c9820f21a861" class="lightbox-link"><img src="../../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-78ef8f66663b74e79f03c9820f21a861"><img src="../../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <ul>
 <li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/start.html" target="_blank"><strong>start</strong></a>: shown between menu and breadcrumb</li>
 <li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/end.html" target="_blank"><strong>end</strong></a>: shown on the opposite breadcrumb side in comparison to the <em>start</em> area</li>
@@ -426,8 +426,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/categories/basic/index.html b/categories/basic/index.html
index 7d891658f5..d32e61c9d1 100644
--- a/categories/basic/index.html
+++ b/categories/basic/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/basic/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/basic/index.html" rel="alternate" hreflang="pir">
     <link href="../../categories/basic/index.xml" rel="alternate" type="application/rss+xml" title="basic :: Category :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -217,12 +217,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -312,9 +312,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -379,13 +381,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/categories/content/index.html b/categories/content/index.html
index c5a319b1ed..0dc1e1458c 100644
--- a/categories/content/index.html
+++ b/categories/content/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/content/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/content/index.html" rel="alternate" hreflang="pir">
     <link href="../../categories/content/index.xml" rel="alternate" type="application/rss+xml" title="content :: Category :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -217,12 +217,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -312,9 +312,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -379,13 +381,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/categories/custom/index.html b/categories/custom/index.html
index e13794835b..10e2e40051 100644
--- a/categories/custom/index.html
+++ b/categories/custom/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/custom/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/custom/index.html" rel="alternate" hreflang="pir">
     <link href="../../categories/custom/index.xml" rel="alternate" type="application/rss+xml" title="custom :: Category :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -217,12 +217,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -312,9 +312,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -379,13 +381,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/categories/index.html b/categories/index.html
index 2371c0e47c..f3baab7753 100644
--- a/categories/index.html
+++ b/categories/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/index.html" rel="alternate" hreflang="pir">
     <link href="../categories/index.xml" rel="alternate" type="application/rss+xml" title="Categories :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../js/url.js?1700525732"></script>
-    <script src="../js/variant.js?1700525732"></script>
+    <link href="../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../js/url.js?1700697951"></script>
+    <script src="../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -228,12 +228,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../js/search.js?1700525733" defer></script>
+        <script src="../js/auto-complete.js?1700697952" defer></script>
+        <script src="../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -323,9 +323,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -390,13 +392,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../js/github-buttons.js?1700525733"></script>
+          <script async src="../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../js/theme.js?1700525733" defer></script>
+    <script src="../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/categories/taxonomy/index.html b/categories/taxonomy/index.html
index 26ef7bc3cb..6c3c72ff8e 100644
--- a/categories/taxonomy/index.html
+++ b/categories/taxonomy/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/taxonomy/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/taxonomy/index.html" rel="alternate" hreflang="pir">
     <link href="../../categories/taxonomy/index.xml" rel="alternate" type="application/rss+xml" title="taxonomy :: Category :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -217,12 +217,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -312,9 +312,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -379,13 +381,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/categories/theming/index.html b/categories/theming/index.html
index 76ddbe88eb..5485cef7a0 100644
--- a/categories/theming/index.html
+++ b/categories/theming/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/theming/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/theming/index.html" rel="alternate" hreflang="pir">
     <link href="../../categories/theming/index.xml" rel="alternate" type="application/rss+xml" title="theming :: Category :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -222,12 +222,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -317,9 +317,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -384,13 +386,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/config/_default/params.toml b/config/_default/params.toml
index 93d1111d5f..3b2c576acc 100644
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@@ -61,26 +61,20 @@ social.twitter = ""
 # You can also define your own variants. See the docs how this works. Also,
 # the docs provide an interactive theme generator to help you with this task.
 themeVariant = [
-	{ identifier = "auto"          },
-	{ identifier = "relearn-light" },
-	{ identifier = "relearn-dark"  },
-	{ identifier = "zen-light"     },
-	{ identifier = "zen-dark"      },
-	{ identifier = "neon"          },
-	{ identifier = "learn"         },
-	{ identifier = "blue"          },
-	{ identifier = "green"         },
-	{ identifier = "red"           }
+	{ identifier = "relearn-auto",  name = "Relearn Light/Dark", auto = [] },
+	{ identifier = "relearn-light"  },
+	{ identifier = "relearn-dark"   },
+	{ identifier = "relearn-bright" },
+	{ identifier = "zen-auto",      name = "Zen Light/Dark", auto = [ "zen-light", "zen-dark" ] },
+	{ identifier = "zen-light"      },
+	{ identifier = "zen-dark"       },
+	{ identifier = "neon"           },
+	{ identifier = "learn"          },
+	{ identifier = "blue"           },
+	{ identifier = "green"          },
+	{ identifier = "red"            }
 ]
 
-# The color variants used for auto mode.
-# Default: [ "relearn-light", "relearn-dark" ], overwritten by the first
-# two non-auto options of your `themeVariant` option if present.
-# The auto variant defines how your site adjusts to your selected OS settings
-# for light/dark mode. The first array element is the variant for light mode,
-# the second for dark mode.
-themeVariantAuto = [ "relearn-light", "relearn-dark" ]
-
 #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # General
 # These options are defining general, non visual behavior.
diff --git a/cont/archetypes/index.html b/cont/archetypes/index.html
index b1af7dad77..23a6795988 100644
--- a/cont/archetypes/index.html
+++ b/cont/archetypes/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/archetypes/index.html" rel="alternate" hreflang="pir">
     <link href="../../cont/archetypes/index.xml" rel="alternate" type="application/rss+xml" title="Archetypes :: Hugo Relearn Theme">
     <link href="../../cont/archetypes/index.print.html" rel="alternate" type="text/html" title="Archetypes :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -154,8 +154,8 @@
 <h2 id="predefined-archetypes">Predefined Archetypes</h2>
 <h3 id="archetypes-home">Home</h3>
 <p>A <strong>Home</strong> page is the starting page of your project. It&rsquo;s best to have only one page of this kind in your project.</p>
-<p><a href="#R-image-b5e009feb09e244874576a2575375442" class="lightbox-link"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-b5e009feb09e244874576a2575375442"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-63b40dcc3e8dc6cbd54e582354b84446" class="lightbox-link"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-63b40dcc3e8dc6cbd54e582354b84446"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>To create a home page, run the following command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind home _index.md</span></span></code></pre></div><p>This leads to a file with the following content</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -165,8 +165,8 @@
 </span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><h3 id="archetypes-chapter">Chapter</h3>
 <p>A <strong>Chapter</strong> displays a page meant to be used as introduction for a set of child pages. Commonly, it contains a simple title and a catch line to define content that can be found below it.</p>
-<p><a href="#R-image-0906ad0ef1ba9723bf1ae4bad6646fb0" class="lightbox-link"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-0906ad0ef1ba9723bf1ae4bad6646fb0"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-988f48238b809bf4914c25005253b177" class="lightbox-link"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-988f48238b809bf4914c25005253b177"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>To create a chapter page, run the following command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter &lt;name&gt;/_index.md</span></span></code></pre></div><p>This leads to a file with the following content</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -178,8 +178,8 @@
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><p>Replace the <code>X</code> with a number. Because this number will be used to generate the subtitle of the chapter page, set the number to a consecutive value starting at 1 for each new chapter level.</p>
 <h3 id="archetypes-default">Default</h3>
 <p>A <strong>Default</strong> page is any other content page. If you set an unknown archetype in your frontmatter, this archetype will be used to generate the page.</p>
-<p><a href="#R-image-c7f2f10757447cec85b7aaa615778399" class="lightbox-link"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-c7f2f10757447cec85b7aaa615778399"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-854e3ab1d2bf0acbee955f823ceddbc3" class="lightbox-link"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-854e3ab1d2bf0acbee955f823ceddbc3"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>To create a default page, run either one of the following commands</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;/_index.md</span></span></code></pre></div><p>or</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;.md</span></span></code></pre></div><p>This leads to a file with the following content</p>
@@ -311,12 +311,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -406,9 +406,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -473,13 +475,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/cont/archetypes/index.print.html b/cont/archetypes/index.print.html
index 88be08960f..957f118584 100644
--- a/cont/archetypes/index.print.html
+++ b/cont/archetypes/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/archetypes/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/cont/archetypes/index.html" rel="canonical" type="text/html" title="Archetypes :: Hugo Relearn Theme">
     <link href="../../cont/archetypes/index.xml" rel="alternate" type="application/rss+xml" title="Archetypes :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -98,8 +98,8 @@
 <h2 id="predefined-archetypes">Predefined Archetypes</h2>
 <h3 id="archetypes-home">Home</h3>
 <p>A <strong>Home</strong> page is the starting page of your project. It&rsquo;s best to have only one page of this kind in your project.</p>
-<p><a href="#R-image-b5e009feb09e244874576a2575375442" class="lightbox-link"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-b5e009feb09e244874576a2575375442"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-63b40dcc3e8dc6cbd54e582354b84446" class="lightbox-link"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-63b40dcc3e8dc6cbd54e582354b84446"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>To create a home page, run the following command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind home _index.md</span></span></code></pre></div><p>This leads to a file with the following content</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -109,8 +109,8 @@
 </span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><h3 id="archetypes-chapter">Chapter</h3>
 <p>A <strong>Chapter</strong> displays a page meant to be used as introduction for a set of child pages. Commonly, it contains a simple title and a catch line to define content that can be found below it.</p>
-<p><a href="#R-image-0906ad0ef1ba9723bf1ae4bad6646fb0" class="lightbox-link"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-0906ad0ef1ba9723bf1ae4bad6646fb0"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-988f48238b809bf4914c25005253b177" class="lightbox-link"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-988f48238b809bf4914c25005253b177"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>To create a chapter page, run the following command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter &lt;name&gt;/_index.md</span></span></code></pre></div><p>This leads to a file with the following content</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -122,8 +122,8 @@
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><p>Replace the <code>X</code> with a number. Because this number will be used to generate the subtitle of the chapter page, set the number to a consecutive value starting at 1 for each new chapter level.</p>
 <h3 id="archetypes-default">Default</h3>
 <p>A <strong>Default</strong> page is any other content page. If you set an unknown archetype in your frontmatter, this archetype will be used to generate the page.</p>
-<p><a href="#R-image-c7f2f10757447cec85b7aaa615778399" class="lightbox-link"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-c7f2f10757447cec85b7aaa615778399"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-854e3ab1d2bf0acbee955f823ceddbc3" class="lightbox-link"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-854e3ab1d2bf0acbee955f823ceddbc3"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>To create a default page, run either one of the following commands</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;/_index.md</span></span></code></pre></div><p>or</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;.md</span></span></code></pre></div><p>This leads to a file with the following content</p>
@@ -174,8 +174,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/cont/i18n/index.html b/cont/i18n/index.html
index 00b7794b89..503c238de5 100644
--- a/cont/i18n/index.html
+++ b/cont/i18n/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/i18n/index.html" rel="alternate" hreflang="pir">
     <link href="../../cont/i18n/index.xml" rel="alternate" type="application/rss+xml" title="Multilingual and i18n :: Hugo Relearn Theme">
     <link href="../../cont/i18n/index.print.html" rel="alternate" type="text/html" title="Multilingual and i18n :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -151,8 +151,8 @@
 <li>Automatic menu generation from multilingual content</li>
 <li>In-browser language switching</li>
 </ul>
-<p><a href="#R-image-0bac0ebafc35c659faec5c41497f5de1" class="lightbox-link"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-0bac0ebafc35c659faec5c41497f5de1"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-930fff8a0732a00dba53ff90671c8391" class="lightbox-link"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-930fff8a0732a00dba53ff90671c8391"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="basic-configuration">Basic configuration</h2>
 <p>After learning <a href="https://gohugo.io/content-management/multilingual" target="_blank">how Hugo handle multilingual websites</a>, define your languages in your <code>config.toml</code> file.</p>
 <p>For example with current English and Piratized English website.</p>
@@ -333,12 +333,12 @@ You&rsquo;ll see error reports in your browsers console log for each unsupported
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -428,9 +428,11 @@ You&rsquo;ll see error reports in your browsers console log for each unsupported
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -495,13 +497,13 @@ You&rsquo;ll see error reports in your browsers console log for each unsupported
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/cont/i18n/index.print.html b/cont/i18n/index.print.html
index 543eaed62c..ecd806ea16 100644
--- a/cont/i18n/index.print.html
+++ b/cont/i18n/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/i18n/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/cont/i18n/index.html" rel="canonical" type="text/html" title="Multilingual and i18n :: Hugo Relearn Theme">
     <link href="../../cont/i18n/index.xml" rel="alternate" type="application/rss+xml" title="Multilingual and i18n :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -100,8 +100,8 @@
 <li>Automatic menu generation from multilingual content</li>
 <li>In-browser language switching</li>
 </ul>
-<p><a href="#R-image-0bac0ebafc35c659faec5c41497f5de1" class="lightbox-link"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-0bac0ebafc35c659faec5c41497f5de1"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-930fff8a0732a00dba53ff90671c8391" class="lightbox-link"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-930fff8a0732a00dba53ff90671c8391"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="basic-configuration">Basic configuration</h2>
 <p>After learning <a href="https://gohugo.io/content-management/multilingual" target="_blank">how Hugo handle multilingual websites</a>, define your languages in your <code>config.toml</code> file.</p>
 <p>For example with current English and Piratized English website.</p>
@@ -201,8 +201,8 @@ You&rsquo;ll see error reports in your browsers console log for each unsupported
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/cont/imageeffects/index.html b/cont/imageeffects/index.html
index 8009d3a09b..5f77974840 100644
--- a/cont/imageeffects/index.html
+++ b/cont/imageeffects/index.html
@@ -32,20 +32,20 @@ Without any settings in your config.toml this defaults to">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/imageeffects/index.html" rel="alternate" hreflang="pir">
     <link href="../../cont/imageeffects/index.xml" rel="alternate" type="application/rss+xml" title="Image Effects :: Hugo Relearn Theme">
     <link href="../../cont/imageeffects/index.print.html" rel="alternate" type="text/html" title="Image Effects :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,7 +55,7 @@ Without any settings in your config.toml this defaults to">
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -153,13 +153,13 @@ Without any settings in your config.toml this defaults to">
 <p>Without any settings in your <code>config.toml</code> this defaults to</p>
 
   
-<div class="tab-panel" data-tab-group="ef5c53070a31991f878b62db4ececdb7">
+<div class="tab-panel" data-tab-group="892d2ba4c8a3d3396610b2365d02c3f1">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('ef5c53070a31991f878b62db4ececdb7','configtoml')"
+      onclick="switchTab('892d2ba4c8a3d3396610b2365d02c3f1','configtoml')"
     >
       <span class="tab-nav-text">config.toml</span>
     </button>
@@ -180,13 +180,13 @@ Without any settings in your config.toml this defaults to">
 </div><p>This can be overridden in a pages frontmatter by eg.</p>
 
   
-<div class="tab-panel" data-tab-group="4703cc2d258970edce421bf7089b4c33">
+<div class="tab-panel" data-tab-group="343a73c90ab2970416ebe0f895f625a1">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="frontmatter"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('4703cc2d258970edce421bf7089b4c33','frontmatter')"
+      onclick="switchTab('343a73c90ab2970416ebe0f895f625a1','frontmatter')"
     >
       <span class="tab-nav-text">frontmatter</span>
     </button>
@@ -206,13 +206,13 @@ Without any settings in your config.toml this defaults to">
 </div><p>Or by explicitly override settings by URL query parameter</p>
 
   
-<div class="tab-panel" data-tab-group="16641e7673c49241898ab27a5c8aaa52">
+<div class="tab-panel" data-tab-group="97d3078ca53155c569db3aedc53a91c0">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="url"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('16641e7673c49241898ab27a5c8aaa52','url')"
+      onclick="switchTab('97d3078ca53155c569db3aedc53a91c0','url')"
     >
       <span class="tab-nav-text">URL</span>
     </button>
@@ -229,13 +229,13 @@ Without any settings in your config.toml this defaults to">
 </div><p>The settings applied to the above image would be</p>
 
   
-<div class="tab-panel" data-tab-group="1c1760db15c8b71c80ca1ece161cf555">
+<div class="tab-panel" data-tab-group="73478f1052a49d6a98e0110f05f74e1f">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="result"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('1c1760db15c8b71c80ca1ece161cf555','result')"
+      onclick="switchTab('73478f1052a49d6a98e0110f05f74e1f','result')"
     >
       <span class="tab-nav-text">Result</span>
     </button>
@@ -255,13 +255,13 @@ Without any settings in your config.toml this defaults to">
 </div><p>This ends up in the following HTML where the parameter are converted to CSS classes.</p>
 
   
-<div class="tab-panel" data-tab-group="134c2f5c3693f03eaec6728578bb38bf">
+<div class="tab-panel" data-tab-group="7c69f8a8927cfe08d081724a2cb73a7a">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="html"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('134c2f5c3693f03eaec6728578bb38bf','html')"
+      onclick="switchTab('7c69f8a8927cfe08d081724a2cb73a7a','html')"
     >
       <span class="tab-nav-text">HTML</span>
     </button>
@@ -374,12 +374,12 @@ Without any settings in your config.toml this defaults to">
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525732" defer></script>
-        <script src="../../js/search.js?1700525732" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -469,9 +469,11 @@ Without any settings in your config.toml this defaults to">
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -536,13 +538,13 @@ Without any settings in your config.toml this defaults to">
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525732"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525732" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525732" defer></script>
-    <script src="../../js/theme.js?1700525732" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/cont/imageeffects/index.print.html b/cont/imageeffects/index.print.html
index 129fc2717d..20389ce868 100644
--- a/cont/imageeffects/index.print.html
+++ b/cont/imageeffects/index.print.html
@@ -32,21 +32,21 @@ Without any settings in your config.toml this defaults to">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/imageeffects/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/cont/imageeffects/index.html" rel="canonical" type="text/html" title="Image Effects :: Hugo Relearn Theme">
     <link href="../../cont/imageeffects/index.xml" rel="alternate" type="application/rss+xml" title="Image Effects :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -56,7 +56,7 @@ Without any settings in your config.toml this defaults to">
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -109,13 +109,13 @@ Without any settings in your config.toml this defaults to">
 <p>Without any settings in your <code>config.toml</code> this defaults to</p>
 
   
-<div class="tab-panel" data-tab-group="ef5c53070a31991f878b62db4ececdb7">
+<div class="tab-panel" data-tab-group="892d2ba4c8a3d3396610b2365d02c3f1">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('ef5c53070a31991f878b62db4ececdb7','configtoml')"
+      onclick="switchTab('892d2ba4c8a3d3396610b2365d02c3f1','configtoml')"
     >
       <span class="tab-nav-text">config.toml</span>
     </button>
@@ -136,13 +136,13 @@ Without any settings in your config.toml this defaults to">
 </div><p>This can be overridden in a pages frontmatter by eg.</p>
 
   
-<div class="tab-panel" data-tab-group="4703cc2d258970edce421bf7089b4c33">
+<div class="tab-panel" data-tab-group="343a73c90ab2970416ebe0f895f625a1">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="frontmatter"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('4703cc2d258970edce421bf7089b4c33','frontmatter')"
+      onclick="switchTab('343a73c90ab2970416ebe0f895f625a1','frontmatter')"
     >
       <span class="tab-nav-text">frontmatter</span>
     </button>
@@ -162,13 +162,13 @@ Without any settings in your config.toml this defaults to">
 </div><p>Or by explicitly override settings by URL query parameter</p>
 
   
-<div class="tab-panel" data-tab-group="16641e7673c49241898ab27a5c8aaa52">
+<div class="tab-panel" data-tab-group="97d3078ca53155c569db3aedc53a91c0">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="url"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('16641e7673c49241898ab27a5c8aaa52','url')"
+      onclick="switchTab('97d3078ca53155c569db3aedc53a91c0','url')"
     >
       <span class="tab-nav-text">URL</span>
     </button>
@@ -185,13 +185,13 @@ Without any settings in your config.toml this defaults to">
 </div><p>The settings applied to the above image would be</p>
 
   
-<div class="tab-panel" data-tab-group="1c1760db15c8b71c80ca1ece161cf555">
+<div class="tab-panel" data-tab-group="73478f1052a49d6a98e0110f05f74e1f">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="result"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('1c1760db15c8b71c80ca1ece161cf555','result')"
+      onclick="switchTab('73478f1052a49d6a98e0110f05f74e1f','result')"
     >
       <span class="tab-nav-text">Result</span>
     </button>
@@ -211,13 +211,13 @@ Without any settings in your config.toml this defaults to">
 </div><p>This ends up in the following HTML where the parameter are converted to CSS classes.</p>
 
   
-<div class="tab-panel" data-tab-group="134c2f5c3693f03eaec6728578bb38bf">
+<div class="tab-panel" data-tab-group="7c69f8a8927cfe08d081724a2cb73a7a">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="html"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('134c2f5c3693f03eaec6728578bb38bf','html')"
+      onclick="switchTab('7c69f8a8927cfe08d081724a2cb73a7a','html')"
     >
       <span class="tab-nav-text">HTML</span>
     </button>
@@ -249,8 +249,8 @@ Without any settings in your config.toml this defaults to">
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/cont/index.html b/cont/index.html
index bf1b044cd3..c6f4b33d99 100644
--- a/cont/index.html
+++ b/cont/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/index.html" rel="alternate" hreflang="pir">
     <link href="../cont/index.xml" rel="alternate" type="application/rss+xml" title="Content :: Hugo Relearn Theme">
     <link href="../cont/index.print.html" rel="alternate" type="text/html" title="Content :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../js/url.js?1700525732"></script>
-    <script src="../js/variant.js?1700525732"></script>
+    <link href="../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../js/url.js?1700697951"></script>
+    <script src="../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -222,12 +222,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../js/search.js?1700525733" defer></script>
+        <script src="../js/auto-complete.js?1700697951" defer></script>
+        <script src="../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -317,9 +317,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -384,13 +386,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../js/github-buttons.js?1700525733"></script>
+          <script async src="../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../js/theme.js?1700525733" defer></script>
+    <script src="../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/cont/index.print.html b/cont/index.print.html
index 9b73f01ea6..dd25bcf0fe 100644
--- a/cont/index.print.html
+++ b/cont/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/cont/index.html" rel="canonical" type="text/html" title="Content :: Hugo Relearn Theme">
     <link href="../cont/index.xml" rel="alternate" type="application/rss+xml" title="Content :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../js/url.js?1700525733"></script>
-    <script src="../js/variant.js?1700525733"></script>
+    <link href="../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../js/url.js?1700697952"></script>
+    <script src="../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -182,8 +182,8 @@
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
 </span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;GitHub repo&#34;</span>
 </span></span><span class="line"><span class="cl"><span class="nx">menuPre</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fab fa-github&#39;&gt;&lt;/i&gt; &#34;</span>
-</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#R-image-0d048aff75e19c4f629f440ece364f36" class="lightbox-link"><img src="../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-0d048aff75e19c4f629f440ece364f36"><img src="../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#R-image-7899e082d2f3d99e2f34aec3957b4e06" class="lightbox-link"><img src="../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-7899e082d2f3d99e2f34aec3957b4e06"><img src="../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h3 id="ordering-sibling-menupage-entries">Ordering sibling menu/page entries</h3>
 <p>Hugo provides a <a href="https://gohugo.io/content/ordering/" target="_blank">flexible way</a> to handle order for your pages.</p>
 <p>The simplest way is to set <code>weight</code> parameter to a number.</p>
@@ -231,8 +231,8 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
 <h2 id="predefined-archetypes">Predefined Archetypes</h2>
 <h3 id="archetypes-home">Home</h3>
 <p>A <strong>Home</strong> page is the starting page of your project. It&rsquo;s best to have only one page of this kind in your project.</p>
-<p><a href="#R-image-b5e009feb09e244874576a2575375442" class="lightbox-link"><img src="../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-b5e009feb09e244874576a2575375442"><img src="../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-63b40dcc3e8dc6cbd54e582354b84446" class="lightbox-link"><img src="../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-63b40dcc3e8dc6cbd54e582354b84446"><img src="../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>To create a home page, run the following command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind home _index.md</span></span></code></pre></div><p>This leads to a file with the following content</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -242,8 +242,8 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
 </span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><h3 id="archetypes-chapter">Chapter</h3>
 <p>A <strong>Chapter</strong> displays a page meant to be used as introduction for a set of child pages. Commonly, it contains a simple title and a catch line to define content that can be found below it.</p>
-<p><a href="#R-image-0906ad0ef1ba9723bf1ae4bad6646fb0" class="lightbox-link"><img src="../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-0906ad0ef1ba9723bf1ae4bad6646fb0"><img src="../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-988f48238b809bf4914c25005253b177" class="lightbox-link"><img src="../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-988f48238b809bf4914c25005253b177"><img src="../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>To create a chapter page, run the following command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter &lt;name&gt;/_index.md</span></span></code></pre></div><p>This leads to a file with the following content</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -255,8 +255,8 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><p>Replace the <code>X</code> with a number. Because this number will be used to generate the subtitle of the chapter page, set the number to a consecutive value starting at 1 for each new chapter level.</p>
 <h3 id="archetypes-default">Default</h3>
 <p>A <strong>Default</strong> page is any other content page. If you set an unknown archetype in your frontmatter, this archetype will be used to generate the page.</p>
-<p><a href="#R-image-c7f2f10757447cec85b7aaa615778399" class="lightbox-link"><img src="../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-c7f2f10757447cec85b7aaa615778399"><img src="../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-854e3ab1d2bf0acbee955f823ceddbc3" class="lightbox-link"><img src="../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-854e3ab1d2bf0acbee955f823ceddbc3"><img src="../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>To create a default page, run either one of the following commands</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;/_index.md</span></span></code></pre></div><p>or</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;.md</span></span></code></pre></div><p>This leads to a file with the following content</p>
@@ -828,8 +828,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-029aa823705ff6beb1af19e314e52586" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-029aa823705ff6beb1af19e314e52586"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-0601095f205ba3e597762a4ebd0d11ba" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-0601095f205ba3e597762a4ebd0d11ba"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-with-tooltip">Image with Tooltip</h3>
@@ -839,8 +839,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-9c3b770d83d6e71f24cd1dcf9466905f" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-9c3b770d83d6e71f24cd1dcf9466905f"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-a193fc2c985738a7d1700521462dedc5" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-a193fc2c985738a7d1700521462dedc5"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-references">Image References</h3>
@@ -852,8 +852,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-468eb4c63b17ff5dba1b4b33182f2282" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-468eb4c63b17ff5dba1b4b33182f2282"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-cd3294761f4efeb06982889bdbf72bc7" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-cd3294761f4efeb06982889bdbf72bc7"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-effects">Image Effects</h3>
@@ -865,8 +865,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-014c6c03d2ea762ba511fa075c075ac7" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-014c6c03d2ea762ba511fa075c075ac7"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-1c3051f762eaa6f6d6fb8d2d354ec9b3" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-1c3051f762eaa6f6d6fb8d2d354ec9b3"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px</span>)</span></span></code></pre></div>
@@ -874,8 +874,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-e45e58d06930f1ee6bad352bde70eb20" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-e45e58d06930f1ee6bad352bde70eb20"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-3d0abe9af74a7ec86c94b8d2f6959c69" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-3d0abe9af74a7ec86c94b8d2f6959c69"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw</span>)</span></span></code></pre></div>
@@ -883,8 +883,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-75df3349121e4920a2bcb6fb3d6d1e9e" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-75df3349121e4920a2bcb6fb3d6d1e9e"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f92de4b36a19c3b91e9b5de77e626d2b" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f92de4b36a19c3b91e9b5de77e626d2b"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="css-classes">CSS Classes</h4>
@@ -895,8 +895,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-15bddc64f2d883daf707145f5a9bc509" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-15bddc64f2d883daf707145f5a9bc509"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
+<p><a href="#R-image-2499927a98955b0cfee354051100c7af" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-2499927a98955b0cfee354051100c7af"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="border">Border</h5>
@@ -905,8 +905,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-4278b1151f7d61278f316b8528023424" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-4278b1151f7d61278f316b8528023424"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-02dbf251eadae322eab68ba684352f56" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-02dbf251eadae322eab68ba684352f56"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="left">Left</h5>
@@ -915,8 +915,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-50a941c02c4c3f7b150fe6c1c84a3a41" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-50a941c02c4c3f7b150fe6c1c84a3a41"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-05519d7a77b910a56951894a7f55f1d4" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-05519d7a77b910a56951894a7f55f1d4"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="right">Right</h5>
@@ -925,8 +925,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-36fffdedd9bdddc87b7a62c5cc3faac2" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-36fffdedd9bdddc87b7a62c5cc3faac2"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-329d1e44de76cac2a6379767f5a7865c" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-329d1e44de76cac2a6379767f5a7865c"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="inline">Inline</h5>
@@ -938,14 +938,14 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-a726a3622c5d76c84175d649c25de2f6" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-a726a3622c5d76c84175d649c25de2f6"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#R-image-fb45c896d0217e555af78d9e343ba537" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-fb45c896d0217e555af78d9e343ba537"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#R-image-d9bceefd274be9d1add525ba26a4d9eb" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-d9bceefd274be9d1add525ba26a4d9eb"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#R-image-d7a43626512b914795b214e90c4fd9df" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-d7a43626512b914795b214e90c4fd9df"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-1033acc35e673a46d25be358217e031d" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-1033acc35e673a46d25be358217e031d"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#R-image-22873f75f5e1b4aa0f325afd881b3679" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-22873f75f5e1b4aa0f325afd881b3679"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#R-image-856b238b356259eda710932af8b40d3b" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-856b238b356259eda710932af8b40d3b"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#R-image-23be4dd692eb094aa57e3c804a4b21fd" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-23be4dd692eb094aa57e3c804a4b21fd"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="combination">Combination</h5>
@@ -954,8 +954,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-01f282cf2bbf6d05e0818c7ac97da744" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-01f282cf2bbf6d05e0818c7ac97da744"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
+<p><a href="#R-image-31e81d0a51f54303712e1e50dfe6ad66" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-31e81d0a51f54303712e1e50dfe6ad66"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="lightbox">Lightbox</h4>
@@ -994,13 +994,13 @@ line 3 of code
 <p>Without any settings in your <code>config.toml</code> this defaults to</p>
 
   
-<div class="tab-panel" data-tab-group="ef5c53070a31991f878b62db4ececdb7">
+<div class="tab-panel" data-tab-group="892d2ba4c8a3d3396610b2365d02c3f1">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('ef5c53070a31991f878b62db4ececdb7','configtoml')"
+      onclick="switchTab('892d2ba4c8a3d3396610b2365d02c3f1','configtoml')"
     >
       <span class="tab-nav-text">config.toml</span>
     </button>
@@ -1021,13 +1021,13 @@ line 3 of code
 </div><p>This can be overridden in a pages frontmatter by eg.</p>
 
   
-<div class="tab-panel" data-tab-group="4703cc2d258970edce421bf7089b4c33">
+<div class="tab-panel" data-tab-group="343a73c90ab2970416ebe0f895f625a1">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="frontmatter"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('4703cc2d258970edce421bf7089b4c33','frontmatter')"
+      onclick="switchTab('343a73c90ab2970416ebe0f895f625a1','frontmatter')"
     >
       <span class="tab-nav-text">frontmatter</span>
     </button>
@@ -1047,13 +1047,13 @@ line 3 of code
 </div><p>Or by explicitly override settings by URL query parameter</p>
 
   
-<div class="tab-panel" data-tab-group="16641e7673c49241898ab27a5c8aaa52">
+<div class="tab-panel" data-tab-group="97d3078ca53155c569db3aedc53a91c0">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="url"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('16641e7673c49241898ab27a5c8aaa52','url')"
+      onclick="switchTab('97d3078ca53155c569db3aedc53a91c0','url')"
     >
       <span class="tab-nav-text">URL</span>
     </button>
@@ -1070,13 +1070,13 @@ line 3 of code
 </div><p>The settings applied to the above image would be</p>
 
   
-<div class="tab-panel" data-tab-group="1c1760db15c8b71c80ca1ece161cf555">
+<div class="tab-panel" data-tab-group="73478f1052a49d6a98e0110f05f74e1f">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="result"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('1c1760db15c8b71c80ca1ece161cf555','result')"
+      onclick="switchTab('73478f1052a49d6a98e0110f05f74e1f','result')"
     >
       <span class="tab-nav-text">Result</span>
     </button>
@@ -1096,13 +1096,13 @@ line 3 of code
 </div><p>This ends up in the following HTML where the parameter are converted to CSS classes.</p>
 
   
-<div class="tab-panel" data-tab-group="134c2f5c3693f03eaec6728578bb38bf">
+<div class="tab-panel" data-tab-group="7c69f8a8927cfe08d081724a2cb73a7a">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="html"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('134c2f5c3693f03eaec6728578bb38bf','html')"
+      onclick="switchTab('7c69f8a8927cfe08d081724a2cb73a7a','html')"
     >
       <span class="tab-nav-text">HTML</span>
     </button>
@@ -1277,8 +1277,8 @@ However, if you want to keep the title but change its value, it can be overridde
 <li>Automatic menu generation from multilingual content</li>
 <li>In-browser language switching</li>
 </ul>
-<p><a href="#R-image-0bac0ebafc35c659faec5c41497f5de1" class="lightbox-link"><img src="../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-0bac0ebafc35c659faec5c41497f5de1"><img src="../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-930fff8a0732a00dba53ff90671c8391" class="lightbox-link"><img src="../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-930fff8a0732a00dba53ff90671c8391"><img src="../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="basic-configuration">Basic configuration</h2>
 <p>After learning <a href="https://gohugo.io/content-management/multilingual" target="_blank">how Hugo handle multilingual websites</a>, define your languages in your <code>config.toml</code> file.</p>
 <p>For example with current English and Piratized English website.</p>
@@ -1468,8 +1468,8 @@ You&rsquo;ll see error reports in your browsers console log for each unsupported
         </div>
       </main>
     </div>
-    <script src="../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../js/theme.js?1700525733" defer></script>
+    <script src="../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/cont/markdown/index.html b/cont/markdown/index.html
index b8e2f00d3c..5b0013addd 100644
--- a/cont/markdown/index.html
+++ b/cont/markdown/index.html
@@ -30,20 +30,20 @@ Markdown is simple to learn, with minimal extra characters so it&rsquo;s also qu
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/markdown/index.html" rel="alternate" hreflang="pir">
     <link href="../../cont/markdown/index.xml" rel="alternate" type="application/rss+xml" title="Markdown syntax :: Hugo Relearn Theme">
     <link href="../../cont/markdown/index.print.html" rel="alternate" type="text/html" title="Markdown syntax :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,7 +53,7 @@ Markdown is simple to learn, with minimal extra characters so it&rsquo;s also qu
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -711,8 +711,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-029aa823705ff6beb1af19e314e52586" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-029aa823705ff6beb1af19e314e52586"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-0601095f205ba3e597762a4ebd0d11ba" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-0601095f205ba3e597762a4ebd0d11ba"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-with-tooltip">Image with Tooltip</h3>
@@ -722,8 +722,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-9c3b770d83d6e71f24cd1dcf9466905f" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-9c3b770d83d6e71f24cd1dcf9466905f"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-a193fc2c985738a7d1700521462dedc5" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-a193fc2c985738a7d1700521462dedc5"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-references">Image References</h3>
@@ -735,8 +735,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-468eb4c63b17ff5dba1b4b33182f2282" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-468eb4c63b17ff5dba1b4b33182f2282"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-cd3294761f4efeb06982889bdbf72bc7" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-cd3294761f4efeb06982889bdbf72bc7"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-effects">Image Effects</h3>
@@ -748,8 +748,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-014c6c03d2ea762ba511fa075c075ac7" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-014c6c03d2ea762ba511fa075c075ac7"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-1c3051f762eaa6f6d6fb8d2d354ec9b3" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-1c3051f762eaa6f6d6fb8d2d354ec9b3"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px</span>)</span></span></code></pre></div>
@@ -757,8 +757,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-e45e58d06930f1ee6bad352bde70eb20" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-e45e58d06930f1ee6bad352bde70eb20"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-3d0abe9af74a7ec86c94b8d2f6959c69" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-3d0abe9af74a7ec86c94b8d2f6959c69"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw</span>)</span></span></code></pre></div>
@@ -766,8 +766,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-75df3349121e4920a2bcb6fb3d6d1e9e" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-75df3349121e4920a2bcb6fb3d6d1e9e"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f92de4b36a19c3b91e9b5de77e626d2b" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f92de4b36a19c3b91e9b5de77e626d2b"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="css-classes">CSS Classes</h4>
@@ -778,8 +778,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-15bddc64f2d883daf707145f5a9bc509" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-15bddc64f2d883daf707145f5a9bc509"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
+<p><a href="#R-image-2499927a98955b0cfee354051100c7af" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-2499927a98955b0cfee354051100c7af"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="border">Border</h5>
@@ -788,8 +788,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-4278b1151f7d61278f316b8528023424" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-4278b1151f7d61278f316b8528023424"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-02dbf251eadae322eab68ba684352f56" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-02dbf251eadae322eab68ba684352f56"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="left">Left</h5>
@@ -798,8 +798,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-50a941c02c4c3f7b150fe6c1c84a3a41" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-50a941c02c4c3f7b150fe6c1c84a3a41"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-05519d7a77b910a56951894a7f55f1d4" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-05519d7a77b910a56951894a7f55f1d4"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="right">Right</h5>
@@ -808,8 +808,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-36fffdedd9bdddc87b7a62c5cc3faac2" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-36fffdedd9bdddc87b7a62c5cc3faac2"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-329d1e44de76cac2a6379767f5a7865c" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-329d1e44de76cac2a6379767f5a7865c"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="inline">Inline</h5>
@@ -821,14 +821,14 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-a726a3622c5d76c84175d649c25de2f6" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-a726a3622c5d76c84175d649c25de2f6"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#R-image-fb45c896d0217e555af78d9e343ba537" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-fb45c896d0217e555af78d9e343ba537"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#R-image-d9bceefd274be9d1add525ba26a4d9eb" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-d9bceefd274be9d1add525ba26a4d9eb"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#R-image-d7a43626512b914795b214e90c4fd9df" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-d7a43626512b914795b214e90c4fd9df"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-1033acc35e673a46d25be358217e031d" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-1033acc35e673a46d25be358217e031d"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#R-image-22873f75f5e1b4aa0f325afd881b3679" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-22873f75f5e1b4aa0f325afd881b3679"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#R-image-856b238b356259eda710932af8b40d3b" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-856b238b356259eda710932af8b40d3b"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#R-image-23be4dd692eb094aa57e3c804a4b21fd" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-23be4dd692eb094aa57e3c804a4b21fd"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="combination">Combination</h5>
@@ -837,8 +837,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-01f282cf2bbf6d05e0818c7ac97da744" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-01f282cf2bbf6d05e0818c7ac97da744"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
+<p><a href="#R-image-31e81d0a51f54303712e1e50dfe6ad66" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-31e81d0a51f54303712e1e50dfe6ad66"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="lightbox">Lightbox</h4>
@@ -949,12 +949,12 @@ line 3 of code
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525732" defer></script>
-        <script src="../../js/search.js?1700525732" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -1044,9 +1044,11 @@ line 3 of code
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -1111,13 +1113,13 @@ line 3 of code
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525732"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525732" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525732" defer></script>
-    <script src="../../js/theme.js?1700525732" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/cont/markdown/index.print.html b/cont/markdown/index.print.html
index eece1a9251..83fec68b55 100644
--- a/cont/markdown/index.print.html
+++ b/cont/markdown/index.print.html
@@ -30,21 +30,21 @@ Markdown is simple to learn, with minimal extra characters so it&rsquo;s also qu
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/markdown/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/cont/markdown/index.html" rel="canonical" type="text/html" title="Markdown syntax :: Hugo Relearn Theme">
     <link href="../../cont/markdown/index.xml" rel="alternate" type="application/rss+xml" title="Markdown syntax :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,7 +54,7 @@ Markdown is simple to learn, with minimal extra characters so it&rsquo;s also qu
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -619,8 +619,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-029aa823705ff6beb1af19e314e52586" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-029aa823705ff6beb1af19e314e52586"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-0601095f205ba3e597762a4ebd0d11ba" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-0601095f205ba3e597762a4ebd0d11ba"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-with-tooltip">Image with Tooltip</h3>
@@ -630,8 +630,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-9c3b770d83d6e71f24cd1dcf9466905f" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-9c3b770d83d6e71f24cd1dcf9466905f"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-a193fc2c985738a7d1700521462dedc5" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-a193fc2c985738a7d1700521462dedc5"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-references">Image References</h3>
@@ -643,8 +643,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-468eb4c63b17ff5dba1b4b33182f2282" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-468eb4c63b17ff5dba1b4b33182f2282"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-cd3294761f4efeb06982889bdbf72bc7" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-cd3294761f4efeb06982889bdbf72bc7"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-effects">Image Effects</h3>
@@ -656,8 +656,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-014c6c03d2ea762ba511fa075c075ac7" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-014c6c03d2ea762ba511fa075c075ac7"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-1c3051f762eaa6f6d6fb8d2d354ec9b3" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-1c3051f762eaa6f6d6fb8d2d354ec9b3"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px</span>)</span></span></code></pre></div>
@@ -665,8 +665,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-e45e58d06930f1ee6bad352bde70eb20" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-e45e58d06930f1ee6bad352bde70eb20"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-3d0abe9af74a7ec86c94b8d2f6959c69" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-3d0abe9af74a7ec86c94b8d2f6959c69"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw</span>)</span></span></code></pre></div>
@@ -674,8 +674,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-75df3349121e4920a2bcb6fb3d6d1e9e" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-75df3349121e4920a2bcb6fb3d6d1e9e"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f92de4b36a19c3b91e9b5de77e626d2b" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f92de4b36a19c3b91e9b5de77e626d2b"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="css-classes">CSS Classes</h4>
@@ -686,8 +686,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-15bddc64f2d883daf707145f5a9bc509" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-15bddc64f2d883daf707145f5a9bc509"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
+<p><a href="#R-image-2499927a98955b0cfee354051100c7af" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-2499927a98955b0cfee354051100c7af"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="border">Border</h5>
@@ -696,8 +696,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-4278b1151f7d61278f316b8528023424" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-4278b1151f7d61278f316b8528023424"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-02dbf251eadae322eab68ba684352f56" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-02dbf251eadae322eab68ba684352f56"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="left">Left</h5>
@@ -706,8 +706,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-50a941c02c4c3f7b150fe6c1c84a3a41" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-50a941c02c4c3f7b150fe6c1c84a3a41"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-05519d7a77b910a56951894a7f55f1d4" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-05519d7a77b910a56951894a7f55f1d4"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="right">Right</h5>
@@ -716,8 +716,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-36fffdedd9bdddc87b7a62c5cc3faac2" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-36fffdedd9bdddc87b7a62c5cc3faac2"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-329d1e44de76cac2a6379767f5a7865c" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-329d1e44de76cac2a6379767f5a7865c"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="inline">Inline</h5>
@@ -729,14 +729,14 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-a726a3622c5d76c84175d649c25de2f6" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-a726a3622c5d76c84175d649c25de2f6"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#R-image-fb45c896d0217e555af78d9e343ba537" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-fb45c896d0217e555af78d9e343ba537"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#R-image-d9bceefd274be9d1add525ba26a4d9eb" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-d9bceefd274be9d1add525ba26a4d9eb"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#R-image-d7a43626512b914795b214e90c4fd9df" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-d7a43626512b914795b214e90c4fd9df"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-1033acc35e673a46d25be358217e031d" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-1033acc35e673a46d25be358217e031d"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#R-image-22873f75f5e1b4aa0f325afd881b3679" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-22873f75f5e1b4aa0f325afd881b3679"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#R-image-856b238b356259eda710932af8b40d3b" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-856b238b356259eda710932af8b40d3b"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#R-image-23be4dd692eb094aa57e3c804a4b21fd" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-23be4dd692eb094aa57e3c804a4b21fd"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="combination">Combination</h5>
@@ -745,8 +745,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-01f282cf2bbf6d05e0818c7ac97da744" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-01f282cf2bbf6d05e0818c7ac97da744"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
+<p><a href="#R-image-31e81d0a51f54303712e1e50dfe6ad66" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-31e81d0a51f54303712e1e50dfe6ad66"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="lightbox">Lightbox</h4>
@@ -776,8 +776,8 @@ line 3 of code
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/cont/menushortcuts/index.html b/cont/menushortcuts/index.html
index 5cd19e5fa5..8e0b66be81 100644
--- a/cont/menushortcuts/index.html
+++ b/cont/menushortcuts/index.html
@@ -30,20 +30,20 @@ Example from the current website:
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/menushortcuts/index.html" rel="alternate" hreflang="pir">
     <link href="../../cont/menushortcuts/index.xml" rel="alternate" type="application/rss+xml" title="Menu extra shortcuts :: Hugo Relearn Theme">
     <link href="../../cont/menushortcuts/index.print.html" rel="alternate" type="text/html" title="Menu extra shortcuts :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,7 +53,7 @@ Example from the current website:
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -359,12 +359,12 @@ However, if you want to keep the title but change its value, it can be overridde
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525732" defer></script>
-        <script src="../../js/search.js?1700525732" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -454,9 +454,11 @@ However, if you want to keep the title but change its value, it can be overridde
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -521,13 +523,13 @@ However, if you want to keep the title but change its value, it can be overridde
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525732"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525732" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525732" defer></script>
-    <script src="../../js/theme.js?1700525732" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/cont/menushortcuts/index.print.html b/cont/menushortcuts/index.print.html
index 75a43a85e3..abc56916cf 100644
--- a/cont/menushortcuts/index.print.html
+++ b/cont/menushortcuts/index.print.html
@@ -30,21 +30,21 @@ Example from the current website:
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/menushortcuts/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/cont/menushortcuts/index.html" rel="canonical" type="text/html" title="Menu extra shortcuts :: Hugo Relearn Theme">
     <link href="../../cont/menushortcuts/index.xml" rel="alternate" type="application/rss+xml" title="Menu extra shortcuts :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,7 +54,7 @@ Example from the current website:
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -232,8 +232,8 @@ However, if you want to keep the title but change its value, it can be overridde
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/cont/pages/index.html b/cont/pages/index.html
index fcc7b79eb6..e5a13a6404 100644
--- a/cont/pages/index.html
+++ b/cont/pages/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/pages/index.html" rel="alternate" hreflang="pir">
     <link href="../../cont/pages/index.xml" rel="alternate" type="application/rss+xml" title="Pages organization :: Hugo Relearn Theme">
     <link href="../../cont/pages/index.print.html" rel="alternate" type="text/html" title="Pages organization :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -223,8 +223,8 @@
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
 </span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;GitHub repo&#34;</span>
 </span></span><span class="line"><span class="cl"><span class="nx">menuPre</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fab fa-github&#39;&gt;&lt;/i&gt; &#34;</span>
-</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#R-image-0d048aff75e19c4f629f440ece364f36" class="lightbox-link"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-0d048aff75e19c4f629f440ece364f36"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#R-image-7899e082d2f3d99e2f34aec3957b4e06" class="lightbox-link"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-7899e082d2f3d99e2f34aec3957b4e06"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h3 id="ordering-sibling-menupage-entries">Ordering sibling menu/page entries</h3>
 <p>Hugo provides a <a href="https://gohugo.io/content/ordering/" target="_blank">flexible way</a> to handle order for your pages.</p>
 <p>The simplest way is to set <code>weight</code> parameter to a number.</p>
@@ -346,12 +346,12 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -441,9 +441,11 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -508,13 +510,13 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/cont/pages/index.print.html b/cont/pages/index.print.html
index 24a99895ef..184365dbf6 100644
--- a/cont/pages/index.print.html
+++ b/cont/pages/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/pages/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/cont/pages/index.html" rel="canonical" type="text/html" title="Pages organization :: Hugo Relearn Theme">
     <link href="../../cont/pages/index.xml" rel="alternate" type="application/rss+xml" title="Pages organization :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -169,8 +169,8 @@
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
 </span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;GitHub repo&#34;</span>
 </span></span><span class="line"><span class="cl"><span class="nx">menuPre</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fab fa-github&#39;&gt;&lt;/i&gt; &#34;</span>
-</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#R-image-0d048aff75e19c4f629f440ece364f36" class="lightbox-link"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-0d048aff75e19c4f629f440ece364f36"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#R-image-7899e082d2f3d99e2f34aec3957b4e06" class="lightbox-link"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-7899e082d2f3d99e2f34aec3957b4e06"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h3 id="ordering-sibling-menupage-entries">Ordering sibling menu/page entries</h3>
 <p>Hugo provides a <a href="https://gohugo.io/content/ordering/" target="_blank">flexible way</a> to handle order for your pages.</p>
 <p>The simplest way is to set <code>weight</code> parameter to a number.</p>
@@ -211,8 +211,8 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/cont/taxonomy/index.html b/cont/taxonomy/index.html
index 9d3bc5ebac..4de0ab066e 100644
--- a/cont/taxonomy/index.html
+++ b/cont/taxonomy/index.html
@@ -30,20 +30,20 @@ The categories are displayed at the bottom of the page in alphabetical order in
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/taxonomy/index.html" rel="alternate" hreflang="pir">
     <link href="../../cont/taxonomy/index.xml" rel="alternate" type="application/rss+xml" title="Taxonomy :: Hugo Relearn Theme">
     <link href="../../cont/taxonomy/index.print.html" rel="alternate" type="text/html" title="Taxonomy :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,7 +53,7 @@ The categories are displayed at the bottom of the page in alphabetical order in
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -319,12 +319,12 @@ The categories are displayed at the bottom of the page in alphabetical order in
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525732" defer></script>
-        <script src="../../js/search.js?1700525732" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -414,9 +414,11 @@ The categories are displayed at the bottom of the page in alphabetical order in
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -481,13 +483,13 @@ The categories are displayed at the bottom of the page in alphabetical order in
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525732"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525732" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525732" defer></script>
-    <script src="../../js/theme.js?1700525732" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/cont/taxonomy/index.print.html b/cont/taxonomy/index.print.html
index a3c22c4d3f..87e3318725 100644
--- a/cont/taxonomy/index.print.html
+++ b/cont/taxonomy/index.print.html
@@ -30,21 +30,21 @@ The categories are displayed at the bottom of the page in alphabetical order in
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/taxonomy/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/cont/taxonomy/index.html" rel="canonical" type="text/html" title="Taxonomy :: Hugo Relearn Theme">
     <link href="../../cont/taxonomy/index.xml" rel="alternate" type="application/rss+xml" title="Taxonomy :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,7 +54,7 @@ The categories are displayed at the bottom of the page in alphabetical order in
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -187,8 +187,8 @@ The categories are displayed at the bottom of the page in alphabetical order in
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/css/theme-auto.css b/css/theme-relearn-auto.css
similarity index 100%
rename from css/theme-auto.css
rename to css/theme-relearn-auto.css
diff --git a/css/theme-zen-auto.css b/css/theme-zen-auto.css
new file mode 100644
index 0000000000..0dbe256a83
--- /dev/null
+++ b/css/theme-zen-auto.css
@@ -0,0 +1,2 @@
+@import "theme-zen-light.css" screen and (prefers-color-scheme: light);
+@import "theme-zen-dark.css" screen and (prefers-color-scheme: dark);
diff --git a/dev/contributing/index.html b/dev/contributing/index.html
index f8dea4b8a8..6e54ca20f2 100644
--- a/dev/contributing/index.html
+++ b/dev/contributing/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/contributing/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/contributing/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/contributing/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -343,12 +343,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -442,9 +442,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -509,13 +511,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/dev/contributing/index.print.html b/dev/contributing/index.print.html
index 81d72543b6..5a1dacc10c 100644
--- a/dev/contributing/index.print.html
+++ b/dev/contributing/index.print.html
@@ -22,21 +22,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/contributing/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/contributing/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/contributing/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -217,8 +217,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/dev/index.html b/dev/index.html
index 261ecfc792..a4bde3422b 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/index.html" rel="alternate" hreflang="pir">
-    <link href="../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../js/url.js?1700525732"></script>
-    <script src="../js/variant.js?1700525732"></script>
+    <link href="../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../js/url.js?1700697951"></script>
+    <script src="../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -228,12 +228,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../js/search.js?1700525733" defer></script>
+        <script src="../js/auto-complete.js?1700697951" defer></script>
+        <script src="../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -327,9 +327,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -394,13 +396,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../js/github-buttons.js?1700525733"></script>
+          <script async src="../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../js/theme.js?1700525733" defer></script>
+    <script src="../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/dev/index.print.html b/dev/index.print.html
index aa1329c9b8..94b9d28367 100644
--- a/dev/index.print.html
+++ b/dev/index.print.html
@@ -22,21 +22,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/index.html" rel="alternate" hreflang="pir">
-    <link href="../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../js/url.js?1700525733"></script>
-    <script src="../js/variant.js?1700525733"></script>
+    <link href="../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../js/url.js?1700697952"></script>
+    <script src="../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -477,8 +477,8 @@
 <p><strong>Remarks</strong>:</p>
 <p>The location is mandatory due to Hugo&rsquo;s theme site builder.</p>
 <p><strong>Preview</strong> <code>images/screenshot.png</code>:</p>
-<p><a href="#R-image-0d73eb5f98e0772d999e97d204d967a6" class="lightbox-link"><img src="../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-0d73eb5f98e0772d999e97d204d967a6"><img src="../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f0b6317403d1c9f4c84ce52e75fd1940" class="lightbox-link"><img src="../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f0b6317403d1c9f4c84ce52e75fd1940"><img src="../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="hero-image">Hero Image</h2>
 <p><strong>Content</strong>:</p>
 <p>Show the <a href="#demo-screenshot">Demo Screenshot</a> page on different devices and different themes. Composition of the different device screenshots into a template.</p>
@@ -507,11 +507,11 @@
 <p><strong>Remarks</strong>:</p>
 <p>The location of <code>images/tn.png</code> is mandatory due to Hugo&rsquo;s theme site builder.</p>
 <p><strong>Preview</strong> <code>images/hero.png</code>:</p>
-<p><a href="#R-image-7cc3b8c0c8a91ccb2cb468ad774fab5e" class="lightbox-link"><img src="../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-7cc3b8c0c8a91ccb2cb468ad774fab5e"><img src="../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-de257edcc79e67674ec302456d1861da" class="lightbox-link"><img src="../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-de257edcc79e67674ec302456d1861da"><img src="../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p><strong>Preview</strong> <code>images/tn.png</code>:</p>
-<p><a href="#R-image-e94cf3d80123e9168187032f1da9d582" class="lightbox-link"><img src="../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-e94cf3d80123e9168187032f1da9d582"><img src="../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-9849a9377c0bf70c3b154b0c3a6b8e37" class="lightbox-link"><img src="../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-9849a9377c0bf70c3b154b0c3a6b8e37"><img src="../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
             <footer class="footline">
             </footer>
@@ -521,8 +521,8 @@
         </div>
       </main>
     </div>
-    <script src="../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../js/theme.js?1700525733" defer></script>
+    <script src="../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/dev/maintaining/index.html b/dev/maintaining/index.html
index b4a838bacd..e9e54045a4 100644
--- a/dev/maintaining/index.html
+++ b/dev/maintaining/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/maintaining/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/maintaining/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/maintaining/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -434,12 +434,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -533,9 +533,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -600,13 +602,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/dev/maintaining/index.print.html b/dev/maintaining/index.print.html
index 792b0ca58f..9b8d36d172 100644
--- a/dev/maintaining/index.print.html
+++ b/dev/maintaining/index.print.html
@@ -22,21 +22,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/maintaining/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/maintaining/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/maintaining/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -297,8 +297,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/dev/screenshots/index.html b/dev/screenshots/index.html
index 62eecdb8ba..85c80909c1 100644
--- a/dev/screenshots/index.html
+++ b/dev/screenshots/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/screenshots/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/screenshots/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/screenshots/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -169,8 +169,8 @@
 <p><strong>Remarks</strong>:</p>
 <p>The location is mandatory due to Hugo&rsquo;s theme site builder.</p>
 <p><strong>Preview</strong> <code>images/screenshot.png</code>:</p>
-<p><a href="#R-image-0d73eb5f98e0772d999e97d204d967a6" class="lightbox-link"><img src="../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-0d73eb5f98e0772d999e97d204d967a6"><img src="../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f0b6317403d1c9f4c84ce52e75fd1940" class="lightbox-link"><img src="../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f0b6317403d1c9f4c84ce52e75fd1940"><img src="../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="hero-image">Hero Image</h2>
 <p><strong>Content</strong>:</p>
 <p>Show the <a href="#demo-screenshot">Demo Screenshot</a> page on different devices and different themes. Composition of the different device screenshots into a template.</p>
@@ -199,11 +199,11 @@
 <p><strong>Remarks</strong>:</p>
 <p>The location of <code>images/tn.png</code> is mandatory due to Hugo&rsquo;s theme site builder.</p>
 <p><strong>Preview</strong> <code>images/hero.png</code>:</p>
-<p><a href="#R-image-7cc3b8c0c8a91ccb2cb468ad774fab5e" class="lightbox-link"><img src="../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-7cc3b8c0c8a91ccb2cb468ad774fab5e"><img src="../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-de257edcc79e67674ec302456d1861da" class="lightbox-link"><img src="../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-de257edcc79e67674ec302456d1861da"><img src="../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p><strong>Preview</strong> <code>images/tn.png</code>:</p>
-<p><a href="#R-image-e94cf3d80123e9168187032f1da9d582" class="lightbox-link"><img src="../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-e94cf3d80123e9168187032f1da9d582"><img src="../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-9849a9377c0bf70c3b154b0c3a6b8e37" class="lightbox-link"><img src="../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-9849a9377c0bf70c3b154b0c3a6b8e37"><img src="../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
             <footer class="footline">
             </footer>
@@ -293,12 +293,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -392,9 +392,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -459,13 +461,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/dev/screenshots/index.print.html b/dev/screenshots/index.print.html
index 1c14ffeeea..73c835c638 100644
--- a/dev/screenshots/index.print.html
+++ b/dev/screenshots/index.print.html
@@ -22,21 +22,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/screenshots/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/screenshots/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/screenshots/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -123,8 +123,8 @@
 <p><strong>Remarks</strong>:</p>
 <p>The location is mandatory due to Hugo&rsquo;s theme site builder.</p>
 <p><strong>Preview</strong> <code>images/screenshot.png</code>:</p>
-<p><a href="#R-image-0d73eb5f98e0772d999e97d204d967a6" class="lightbox-link"><img src="../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-0d73eb5f98e0772d999e97d204d967a6"><img src="../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f0b6317403d1c9f4c84ce52e75fd1940" class="lightbox-link"><img src="../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f0b6317403d1c9f4c84ce52e75fd1940"><img src="../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="hero-image">Hero Image</h2>
 <p><strong>Content</strong>:</p>
 <p>Show the <a href="#demo-screenshot">Demo Screenshot</a> page on different devices and different themes. Composition of the different device screenshots into a template.</p>
@@ -153,11 +153,11 @@
 <p><strong>Remarks</strong>:</p>
 <p>The location of <code>images/tn.png</code> is mandatory due to Hugo&rsquo;s theme site builder.</p>
 <p><strong>Preview</strong> <code>images/hero.png</code>:</p>
-<p><a href="#R-image-7cc3b8c0c8a91ccb2cb468ad774fab5e" class="lightbox-link"><img src="../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-7cc3b8c0c8a91ccb2cb468ad774fab5e"><img src="../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-de257edcc79e67674ec302456d1861da" class="lightbox-link"><img src="../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-de257edcc79e67674ec302456d1861da"><img src="../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p><strong>Preview</strong> <code>images/tn.png</code>:</p>
-<p><a href="#R-image-e94cf3d80123e9168187032f1da9d582" class="lightbox-link"><img src="../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-e94cf3d80123e9168187032f1da9d582"><img src="../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-9849a9377c0bf70c3b154b0c3a6b8e37" class="lightbox-link"><img src="../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-9849a9377c0bf70c3b154b0c3a6b8e37"><img src="../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
             <footer class="footline">
             </footer>
@@ -166,8 +166,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/index.html b/index.html
index 2abb4caf3b..2f33cdf25c 100644
--- a/index.html
+++ b/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/index.html" rel="alternate" hreflang="pir">
     <link href="./index.xml" rel="alternate" type="application/rss+xml" title="Hugo Relearn Theme">
     <link href="./index.print.html" rel="alternate" type="text/html" title="Hugo Relearn Theme">
-    <link href="./images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="./images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="./css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="./css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="./css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="./css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="./css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="./css/theme.css?1700525732" rel="stylesheet">
-    <link href="./css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="./css/variant.css?1700525732" rel="stylesheet">
-    <link href="./css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="./css/ie.css?1700525732" rel="stylesheet">
-    <script src="./js/url.js?1700525732"></script>
-    <script src="./js/variant.js?1700525732"></script>
+    <link href="./css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="./css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="./css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="./css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="./css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="./css/theme.css?1700697951" rel="stylesheet">
+    <link href="./css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="./css/variant.css?1700697951" rel="stylesheet">
+    <link href="./css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="./css/ie.css?1700697951" rel="stylesheet">
+    <script src="./js/url.js?1700697951"></script>
+    <script src="./js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -142,8 +142,8 @@
 
 <p>A theme for <a href="https://gohugo.io/" target="_blank">Hugo</a> designed for documentation.</p>
 <p><a href="./basics/migration/index.html">★ What&rsquo;s new in the latest release ★</a></p>
-<p><a href="#R-image-ecdf4d64076336b7a304099fecd579f2" class="lightbox-link"><img src="images/hero.png?width=100%25&amp;height=100%25" alt="Image of the Relearn theme in light and dark mode on phone, tablet and desktop" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-ecdf4d64076336b7a304099fecd579f2"><img src="images/hero.png?width=100%25&amp;height=100%25" alt="Image of the Relearn theme in light and dark mode on phone, tablet and desktop" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-645e7629699c9689547cdb142a85e891" class="lightbox-link"><img src="images/hero.png?width=100%25&amp;height=100%25" alt="Image of the Relearn theme in light and dark mode on phone, tablet and desktop" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-645e7629699c9689547cdb142a85e891"><img src="images/hero.png?width=100%25&amp;height=100%25" alt="Image of the Relearn theme in light and dark mode on phone, tablet and desktop" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="motivation">Motivation</h2>
 <p>The theme is a fork of the great <a href="https://github.com/matcornic/hugo-theme-learn" target="_blank">Learn theme</a> with the aim of fixing long outstanding bugs and adapting to latest Hugo features. As far as possible this theme tries to be a drop-in replacement for the Learn theme.</p>
 <h2 id="features">Features</h2>
@@ -318,12 +318,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="./js/auto-complete.js?1700525733" defer></script>
-        <script src="./js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="./js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="./js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="./js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="./js/search.js?1700525733" defer></script>
+        <script src="./js/auto-complete.js?1700697951" defer></script>
+        <script src="./js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="./js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="./js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="./js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="./js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -413,9 +413,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -480,13 +482,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="./js/github-buttons.js?1700525733"></script>
+          <script async src="./js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="./js/clipboard.min.js?1700525733" defer></script>
-    <script src="./js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="./js/theme.js?1700525733" defer></script>
+    <script src="./js/clipboard.min.js?1700697951" defer></script>
+    <script src="./js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="./js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/index.print.html b/index.print.html
index ef14ac3b51..dbe5db7ef3 100644
--- a/index.print.html
+++ b/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/index.html" rel="canonical" type="text/html" title="Hugo Relearn Theme">
     <link href="./index.xml" rel="alternate" type="application/rss+xml" title="Hugo Relearn Theme">
-    <link href="./images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="./images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="./css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="./css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="./css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="./css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="./css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="./css/theme.css?1700525733" rel="stylesheet">
-    <link href="./css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="./css/variant.css?1700525733" rel="stylesheet">
-    <link href="./css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="./css/format-print.css?1700525733" rel="stylesheet">
-    <link href="./css/ie.css?1700525733" rel="stylesheet">
-    <script src="./js/url.js?1700525733"></script>
-    <script src="./js/variant.js?1700525733"></script>
+    <link href="./css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="./css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="./css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="./css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="./css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="./css/theme.css?1700697952" rel="stylesheet">
+    <link href="./css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="./css/variant.css?1700697952" rel="stylesheet">
+    <link href="./css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="./css/format-print.css?1700697952" rel="stylesheet">
+    <link href="./css/ie.css?1700697952" rel="stylesheet">
+    <script src="./js/url.js?1700697952"></script>
+    <script src="./js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -93,8 +93,8 @@
 
 <p>A theme for <a href="https://gohugo.io/" target="_blank">Hugo</a> designed for documentation.</p>
 <p><a href="./basics/migration/index.html">★ What&rsquo;s new in the latest release ★</a></p>
-<p><a href="#R-image-ecdf4d64076336b7a304099fecd579f2" class="lightbox-link"><img src="./images/hero.png?width=100%25&amp;height=100%25" alt="Image of the Relearn theme in light and dark mode on phone, tablet and desktop" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-ecdf4d64076336b7a304099fecd579f2"><img src="./images/hero.png?width=100%25&amp;height=100%25" alt="Image of the Relearn theme in light and dark mode on phone, tablet and desktop" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-645e7629699c9689547cdb142a85e891" class="lightbox-link"><img src="./images/hero.png?width=100%25&amp;height=100%25" alt="Image of the Relearn theme in light and dark mode on phone, tablet and desktop" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-645e7629699c9689547cdb142a85e891"><img src="./images/hero.png?width=100%25&amp;height=100%25" alt="Image of the Relearn theme in light and dark mode on phone, tablet and desktop" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="motivation">Motivation</h2>
 <p>The theme is a fork of the great <a href="https://github.com/matcornic/hugo-theme-learn" target="_blank">Learn theme</a> with the aim of fixing long outstanding bugs and adapting to latest Hugo features. As far as possible this theme tries to be a drop-in replacement for the Learn theme.</p>
 <h2 id="features">Features</h2>
@@ -229,8 +229,8 @@
 <p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> The light themes have a bit more contrast for content text and headings. Also the syntaxhighlighting was changed to the more colorful MonokaiLight. This brings the syntaxhighlightning in sync with the corresponding dark theme variants, which are using Monokai.</p>
 </li>
 <li>
-<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You now can configure options for every theme variant in your <code>config.toml</code>. This allows for optional <a href="./basics/branding/index.html#theme-variant-advanced">advanced functionality</a>. You don&rsquo;t need to change anything as the old configuration options will still work (but may generate warnings now).</p>
-<p>The advanced functionality allows you to set an explicit name for a theme variant, set different colors (if you are using monochrome SVGs) or even different icons (handy if you want to adjust colors for PNGs, GIFs or JPGs) and provide an extended way to configure the automatic switch of variants based on your OS settings.</p>
+<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> You now can configure additional options for every theme variant in your <code>config.toml</code>. This allows for optional <a href="./basics/branding/index.html#theme-variant-advanced">advanced functionality</a>. You don&rsquo;t need to change anything as the old configuration options will still work (but may generate warnings now).</p>
+<p>The advanced functionality allows you to set an explicit name for a theme variant, set different colors (if you are using monochrome SVGs) or even different icons (handy if you want to adjust colors for PNGs, GIFs or JPGs) and now allows for multiple auto mode variants that adjust to the light/dark preference of your OS settings.</p>
 </li>
 </ul>
 <hr>
@@ -1084,8 +1084,8 @@
 
 <p>Thanks to the simplicity of Hugo, this page is as empty as this theme needs requirements.</p>
 <p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> of the <a href="https://gohugo.io/getting-started/installing/" target="_blank">Hugo binary</a> for your OS (Windows, Linux, Mac).</p>
-<p><a href="#R-image-373b9be6c549ddbcbdf8704134fbc7e6" class="lightbox-link"><img src="./basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-373b9be6c549ddbcbdf8704134fbc7e6"><img src="./basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-33b7d0775a1135452e9397d6288c7e9b" class="lightbox-link"><img src="./basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-33b7d0775a1135452e9397d6288c7e9b"><img src="./basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
             <footer class="footline">
 <div class=" taxonomy-categories term-list cstyle  " title="Categories" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
@@ -1133,8 +1133,8 @@
 </span></span><span class="line"><span class="cl"><span class="gh"># Basics
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>
 </span></span><span class="line"><span class="cl">Discover what this Hugo theme is all about and the core concepts behind it.</span></span></code></pre></div><p>renders as</p>
-<p><a href="#R-image-d8edbe7ccae2d3cdc95f7a4674b0a75e" class="lightbox-link"><img src="./basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-d8edbe7ccae2d3cdc95f7a4674b0a75e"><img src="./basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-1caa1992878aeb081a8865aac1f75a49" class="lightbox-link"><img src="./basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-1caa1992878aeb081a8865aac1f75a49"><img src="./basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>The Relearn theme provides archetypes to create skeletons for your website. Begin by creating your first chapter page with the following command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter basics/_index.md</span></span></code></pre></div><p>By opening the given file, you should see the property <code>chapter=true</code> on top, meaning this page is a <em>chapter</em>.</p>
 <p>By default all chapters and pages are created as a draft. If you want to render these pages, remove the property <code>draft: true</code> from the metadata.</p>
@@ -1181,13 +1181,13 @@
 <p>Note that some of these options are explained in detail in other sections of this documentation.</p>
 
   
-<div class="tab-panel" data-tab-group="00480a48a09d05bd21c01fb64fb62010">
+<div class="tab-panel" data-tab-group="8cb9d10357093b8b6270287c8d9f96d5">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('00480a48a09d05bd21c01fb64fb62010','configtoml')"
+      onclick="switchTab('8cb9d10357093b8b6270287c8d9f96d5','configtoml')"
     >
       <span class="tab-nav-text">config.toml</span>
     </button>
@@ -1262,26 +1262,20 @@
 </span></span><span class="line"><span class="cl"><span class="c"># You can also define your own variants. See the docs how this works. Also,</span>
 </span></span><span class="line"><span class="cl"><span class="c"># the docs provide an interactive theme generator to help you with this task.</span>
 </span></span><span class="line"><span class="cl"><span class="nx">themeVariant</span> <span class="p">=</span> <span class="p">[</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;auto&#34;</span>          <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span> <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>  <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-light&#34;</span>     <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-dark&#34;</span>      <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;neon&#34;</span>          <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;learn&#34;</span>         <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;blue&#34;</span>          <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;green&#34;</span>         <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;red&#34;</span>           <span class="p">}</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-auto&#34;</span><span class="p">,</span>  <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Relearn Light/Dark&#34;</span><span class="p">,</span> <span class="nx">auto</span> <span class="p">=</span> <span class="p">[]</span> <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span>  <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>   <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-bright&#34;</span> <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-auto&#34;</span><span class="p">,</span>      <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Zen Light/Dark&#34;</span><span class="p">,</span> <span class="nx">auto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;zen-light&#34;</span><span class="p">,</span> <span class="s2">&#34;zen-dark&#34;</span> <span class="p">]</span> <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-light&#34;</span>      <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-dark&#34;</span>       <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;neon&#34;</span>           <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;learn&#34;</span>          <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;blue&#34;</span>           <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;green&#34;</span>          <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;red&#34;</span>            <span class="p">}</span>
 </span></span><span class="line"><span class="cl"><span class="p">]</span>
 </span></span><span class="line"><span class="cl">
-</span></span><span class="line"><span class="cl"><span class="c"># The color variants used for auto mode.</span>
-</span></span><span class="line"><span class="cl"><span class="c"># Default: [ &#34;relearn-light&#34;, &#34;relearn-dark&#34; ], overwritten by the first</span>
-</span></span><span class="line"><span class="cl"><span class="c"># two non-auto options of your `themeVariant` option if present.</span>
-</span></span><span class="line"><span class="cl"><span class="c"># The auto variant defines how your site adjusts to your selected OS settings</span>
-</span></span><span class="line"><span class="cl"><span class="c"># for light/dark mode. The first array element is the variant for light mode,</span>
-</span></span><span class="line"><span class="cl"><span class="c"># the second for dark mode.</span>
-</span></span><span class="line"><span class="cl"><span class="nx">themeVariantAuto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;relearn-light&#34;</span><span class="p">,</span> <span class="s2">&#34;relearn-dark&#34;</span> <span class="p">]</span>
-</span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl"><span class="c">#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span>
 </span></span><span class="line"><span class="cl"><span class="c"># General</span>
 </span></span><span class="line"><span class="cl"><span class="c"># These options are defining general, non visual behavior.</span>
@@ -1662,7 +1656,7 @@
 </div>
 </div>
 <h2 id="adjust-to-os-settings">Adjust to OS Settings</h2>
-<p>You can also cause the site to adjust to your OS settings for light/dark mode. Just set the <code>themeVariant</code> to <code>auto</code>. That&rsquo;s it.</p>
+<p>You can also cause the site to adjust to your OS settings for light/dark mode. Just set the <code>themeVariant</code> to <code>auto</code> to become an auto mode variant. That&rsquo;s it.</p>
 <p>You can use the <code>auto</code> value with the single or multiple variants option. If you are using multiple variants, you can drop <code>auto</code> at any position in the option&rsquo;s array, but usually it makes sense to set it in the first position and make it the default.</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">themeVariant</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;auto&#34;</span><span class="p">,</span> <span class="s2">&#34;red&#34;</span> <span class="p">]</span></span></span></code></pre></div><p>If you don&rsquo;t configure anything else, the theme will default to use <code>relearn-light</code> for light mode and <code>relearn-dark</code> for dark mode. These defaults are overwritten by the first two non-auto options of your <code>themeVariant</code> option if present.</p>
@@ -1719,9 +1713,33 @@
 <td>see notes</td>
 <td>The name to be displayed in the variant selector. If not set, the identifier is used in a human readable form.</td>
 </tr>
+<tr>
+<td>auto</td>
+<td><em>&lt;empty&gt;</em></td>
+<td>If set, the variant is treated as an <a href="#adjust-to-os-settings">auto mode variant</a>. It has the same behavior as the <code>themeVariantAuto</code> option. The first entry in the array is the color variant for light mode, the second for dark mode. Defining auto mode variants with the advanced options has the benefit that you can now have multiple auto mode variants instead of just one with the simple options.</td>
+</tr>
 </tbody>
 </table>
-
+<h3 id="example-configuration-of-this-site">Example Configuration of This Site</h3>
+<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-auto&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Relearn Light/Dark&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">auto</span> <span class="p">=</span> <span class="p">[]</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-auto&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Zen Light/Dark&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">auto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;zen-light&#34;</span><span class="p">,</span> <span class="s2">&#34;zen-dark&#34;</span> <span class="p">]</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-light&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-dark&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;neon&#34;</span></span></span></code></pre></div>
             <footer class="footline">
 <div class=" taxonomy-categories term-list cstyle  " title="Categories" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
   <i class="fa-fw fas fa-layer-group"></i>
@@ -1763,8 +1781,8 @@
 <p>You can add a dedicated search page for your page by adding the <code>SEARCHPAGE</code> outputformat to your home page by adding the following lines in your <code>config.toml</code> file. This will cause Hugo to generate a new file <code>http://example.com/mysite/search.html</code>.</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">home</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;HTML&#34;</span><span class="p">,</span> <span class="s2">&#34;RSS&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCH&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCHPAGE&#34;</span><span class="p">]</span></span></span></code></pre></div><p>You can access this page by either clicking on the magnifier glass or by typing some search term and pressing <code>ENTER</code> inside of the menu&rsquo;s search box .</p>
-<p><a href="#R-image-82e62cf731946c5e06e4387b08649ba2" class="lightbox-link"><img src="./basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-82e62cf731946c5e06e4387b08649ba2"><img src="./basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-0d8adba30cf33f90e04372c07a5515db" class="lightbox-link"><img src="./basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-0d8adba30cf33f90e04372c07a5515db"><img src="./basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 <div class="box notices cstyle note">
   <div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Note</div>
@@ -1805,8 +1823,8 @@ appearance, you will have to configure the <code>landingPageName</code> for the
 </span></span><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Arrr! Homme&#34;</span>
 </span></span><span class="line"><span class="cl"><span class="p">...</span></span></span></code></pre></div><p>If this option is not configured for a specific language, they will get their default values:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Home&#34;</span></span></span></code></pre></div><p>The home button is going to look like this:</p>
-<p><a href="#R-image-023c5fcc2fb9e789508d876b1b28b0bc" class="lightbox-link"><img src="./basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-023c5fcc2fb9e789508d876b1b28b0bc"><img src="./basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f3f67cd71bc40395445aa7cc3e173d9e" class="lightbox-link"><img src="./basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f3f67cd71bc40395445aa7cc3e173d9e"><img src="./basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="social-media-meta-tags">Social Media Meta Tags</h2>
 <p>You can add social media meta tags for the <a href="https://gohugo.io/templates/internal/#open-graph" target="_blank">Open Graph</a> protocol and <a href="https://gohugo.io/templates/internal/#twitter-cards" target="_blank">Twitter Cards</a> to your site. These are configured as mentioned in the Hugo docs.</p>
 <h2 id="change-the-menu-width">Change the Menu Width</h2>
@@ -1910,13 +1928,13 @@ appearance, you will have to configure the <code>landingPageName</code> for the
 <p>This interactive tool may help you to generate your own color variant stylesheet.</p>
 
 <div class="expand">
-    <input type="checkbox" id="R-expand-6a6994a74c1862a2e4c6d2d290a82bf0" aria-controls="R-expandcontent-6a6994a74c1862a2e4c6d2d290a82bf0" >
-    <label class="expand-label" for="R-expand-6a6994a74c1862a2e4c6d2d290a82bf0" >
+    <input type="checkbox" id="R-expand-87a7efe1d092fde815cae8627f43bc7f" aria-controls="R-expandcontent-87a7efe1d092fde815cae8627f43bc7f" >
+    <label class="expand-label" for="R-expand-87a7efe1d092fde815cae8627f43bc7f" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show usage instructions
     </label>
-    <div id="R-expandcontent-6a6994a74c1862a2e4c6d2d290a82bf0" class="expand-content">
+    <div id="R-expandcontent-87a7efe1d092fde815cae8627f43bc7f" class="expand-content">
 
 <p>To get started, first select a color variant from the variant selector in the lower left sidebar that fits you best as a starting point.</p>
 <p>The graph is interactive and reflect the current colors. You can click on any of the colored boxes to adjust the respective color. The graph <strong>and the page</strong> will update accordingly.</p>
@@ -1976,8 +1994,8 @@ window.variants && variants.generator( '#R-vargenerator' );
 <h1 id="topbar-modification">Topbar Modification</h1>
 
 <p>The theme comes with a reasonably configured topbar.</p>
-<p><a href="#R-image-c745e394038b6004e5ff1647cb24029d" class="lightbox-link"><img src="./basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-c745e394038b6004e5ff1647cb24029d"><img src="./basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-147ab4cae608f96fdeffc348bd98d585" class="lightbox-link"><img src="./basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-147ab4cae608f96fdeffc348bd98d585"><img src="./basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>Nevertheless, your requirements may differ from this configuration. Luckily the theme got you covered as the themebar, its buttons and the functionality behind these buttons is fully configurable by you.</p>
 
 <div class="box notices cstyle tip">
@@ -1989,8 +2007,8 @@ window.variants && variants.generator( '#R-vargenerator' );
 </div>
 <h2 id="areas">Areas</h2>
 <p>The default configuration comes with three predefined areas that may contain an arbitrary set of buttons.</p>
-<p><a href="#R-image-690c1cccb3d28b84a260c167f50c1895" class="lightbox-link"><img src="./basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-690c1cccb3d28b84a260c167f50c1895"><img src="./basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-78ef8f66663b74e79f03c9820f21a861" class="lightbox-link"><img src="./basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-78ef8f66663b74e79f03c9820f21a861"><img src="./basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <ul>
 <li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/start.html" target="_blank"><strong>start</strong></a>: shown between menu and breadcrumb</li>
 <li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/end.html" target="_blank"><strong>end</strong></a>: shown on the opposite breadcrumb side in comparison to the <em>start</em> area</li>
@@ -3736,8 +3754,8 @@ window.variants && variants.generator( '#R-vargenerator' );
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
 </span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;GitHub repo&#34;</span>
 </span></span><span class="line"><span class="cl"><span class="nx">menuPre</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fab fa-github&#39;&gt;&lt;/i&gt; &#34;</span>
-</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#R-image-0d048aff75e19c4f629f440ece364f36" class="lightbox-link"><img src="./cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-0d048aff75e19c4f629f440ece364f36"><img src="./cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#R-image-7899e082d2f3d99e2f34aec3957b4e06" class="lightbox-link"><img src="./cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-7899e082d2f3d99e2f34aec3957b4e06"><img src="./cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title with icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h3 id="ordering-sibling-menupage-entries">Ordering sibling menu/page entries</h3>
 <p>Hugo provides a <a href="https://gohugo.io/content/ordering/" target="_blank">flexible way</a> to handle order for your pages.</p>
 <p>The simplest way is to set <code>weight</code> parameter to a number.</p>
@@ -3785,8 +3803,8 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
 <h2 id="predefined-archetypes">Predefined Archetypes</h2>
 <h3 id="archetypes-home">Home</h3>
 <p>A <strong>Home</strong> page is the starting page of your project. It&rsquo;s best to have only one page of this kind in your project.</p>
-<p><a href="#R-image-b5e009feb09e244874576a2575375442" class="lightbox-link"><img src="./cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-b5e009feb09e244874576a2575375442"><img src="./cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-63b40dcc3e8dc6cbd54e582354b84446" class="lightbox-link"><img src="./cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-63b40dcc3e8dc6cbd54e582354b84446"><img src="./cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>To create a home page, run the following command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind home _index.md</span></span></code></pre></div><p>This leads to a file with the following content</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -3796,8 +3814,8 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
 </span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><h3 id="archetypes-chapter">Chapter</h3>
 <p>A <strong>Chapter</strong> displays a page meant to be used as introduction for a set of child pages. Commonly, it contains a simple title and a catch line to define content that can be found below it.</p>
-<p><a href="#R-image-0906ad0ef1ba9723bf1ae4bad6646fb0" class="lightbox-link"><img src="./cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-0906ad0ef1ba9723bf1ae4bad6646fb0"><img src="./cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-988f48238b809bf4914c25005253b177" class="lightbox-link"><img src="./cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-988f48238b809bf4914c25005253b177"><img src="./cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>To create a chapter page, run the following command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter &lt;name&gt;/_index.md</span></span></code></pre></div><p>This leads to a file with the following content</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -3809,8 +3827,8 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><p>Replace the <code>X</code> with a number. Because this number will be used to generate the subtitle of the chapter page, set the number to a consecutive value starting at 1 for each new chapter level.</p>
 <h3 id="archetypes-default">Default</h3>
 <p>A <strong>Default</strong> page is any other content page. If you set an unknown archetype in your frontmatter, this archetype will be used to generate the page.</p>
-<p><a href="#R-image-c7f2f10757447cec85b7aaa615778399" class="lightbox-link"><img src="./cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-c7f2f10757447cec85b7aaa615778399"><img src="./cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-854e3ab1d2bf0acbee955f823ceddbc3" class="lightbox-link"><img src="./cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-854e3ab1d2bf0acbee955f823ceddbc3"><img src="./cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>To create a default page, run either one of the following commands</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;/_index.md</span></span></code></pre></div><p>or</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;.md</span></span></code></pre></div><p>This leads to a file with the following content</p>
@@ -4382,8 +4400,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-029aa823705ff6beb1af19e314e52586" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-029aa823705ff6beb1af19e314e52586"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-0601095f205ba3e597762a4ebd0d11ba" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-0601095f205ba3e597762a4ebd0d11ba"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-with-tooltip">Image with Tooltip</h3>
@@ -4393,8 +4411,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-9c3b770d83d6e71f24cd1dcf9466905f" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-9c3b770d83d6e71f24cd1dcf9466905f"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-a193fc2c985738a7d1700521462dedc5" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-a193fc2c985738a7d1700521462dedc5"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-references">Image References</h3>
@@ -4406,8 +4424,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-468eb4c63b17ff5dba1b4b33182f2282" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-468eb4c63b17ff5dba1b4b33182f2282"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-cd3294761f4efeb06982889bdbf72bc7" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-cd3294761f4efeb06982889bdbf72bc7"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-effects">Image Effects</h3>
@@ -4419,8 +4437,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-014c6c03d2ea762ba511fa075c075ac7" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-014c6c03d2ea762ba511fa075c075ac7"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-1c3051f762eaa6f6d6fb8d2d354ec9b3" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-1c3051f762eaa6f6d6fb8d2d354ec9b3"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px</span>)</span></span></code></pre></div>
@@ -4428,8 +4446,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-e45e58d06930f1ee6bad352bde70eb20" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-e45e58d06930f1ee6bad352bde70eb20"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-3d0abe9af74a7ec86c94b8d2f6959c69" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-3d0abe9af74a7ec86c94b8d2f6959c69"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw</span>)</span></span></code></pre></div>
@@ -4437,8 +4455,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-75df3349121e4920a2bcb6fb3d6d1e9e" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-75df3349121e4920a2bcb6fb3d6d1e9e"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f92de4b36a19c3b91e9b5de77e626d2b" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f92de4b36a19c3b91e9b5de77e626d2b"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="css-classes">CSS Classes</h4>
@@ -4449,8 +4467,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-15bddc64f2d883daf707145f5a9bc509" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-15bddc64f2d883daf707145f5a9bc509"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
+<p><a href="#R-image-2499927a98955b0cfee354051100c7af" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-2499927a98955b0cfee354051100c7af"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="border">Border</h5>
@@ -4459,8 +4477,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-4278b1151f7d61278f316b8528023424" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-4278b1151f7d61278f316b8528023424"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-02dbf251eadae322eab68ba684352f56" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-02dbf251eadae322eab68ba684352f56"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="left">Left</h5>
@@ -4469,8 +4487,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-50a941c02c4c3f7b150fe6c1c84a3a41" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-50a941c02c4c3f7b150fe6c1c84a3a41"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-05519d7a77b910a56951894a7f55f1d4" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-05519d7a77b910a56951894a7f55f1d4"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="right">Right</h5>
@@ -4479,8 +4497,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-36fffdedd9bdddc87b7a62c5cc3faac2" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-36fffdedd9bdddc87b7a62c5cc3faac2"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-329d1e44de76cac2a6379767f5a7865c" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-329d1e44de76cac2a6379767f5a7865c"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="inline">Inline</h5>
@@ -4492,14 +4510,14 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-a726a3622c5d76c84175d649c25de2f6" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-a726a3622c5d76c84175d649c25de2f6"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#R-image-fb45c896d0217e555af78d9e343ba537" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-fb45c896d0217e555af78d9e343ba537"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#R-image-d9bceefd274be9d1add525ba26a4d9eb" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-d9bceefd274be9d1add525ba26a4d9eb"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#R-image-d7a43626512b914795b214e90c4fd9df" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-d7a43626512b914795b214e90c4fd9df"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-1033acc35e673a46d25be358217e031d" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-1033acc35e673a46d25be358217e031d"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#R-image-22873f75f5e1b4aa0f325afd881b3679" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-22873f75f5e1b4aa0f325afd881b3679"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#R-image-856b238b356259eda710932af8b40d3b" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-856b238b356259eda710932af8b40d3b"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#R-image-23be4dd692eb094aa57e3c804a4b21fd" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-23be4dd692eb094aa57e3c804a4b21fd"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="combination">Combination</h5>
@@ -4508,8 +4526,8 @@ line 3 of code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-01f282cf2bbf6d05e0818c7ac97da744" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-01f282cf2bbf6d05e0818c7ac97da744"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
+<p><a href="#R-image-31e81d0a51f54303712e1e50dfe6ad66" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-31e81d0a51f54303712e1e50dfe6ad66"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="lightbox">Lightbox</h4>
@@ -4548,13 +4566,13 @@ line 3 of code
 <p>Without any settings in your <code>config.toml</code> this defaults to</p>
 
   
-<div class="tab-panel" data-tab-group="ef5c53070a31991f878b62db4ececdb7">
+<div class="tab-panel" data-tab-group="892d2ba4c8a3d3396610b2365d02c3f1">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('ef5c53070a31991f878b62db4ececdb7','configtoml')"
+      onclick="switchTab('892d2ba4c8a3d3396610b2365d02c3f1','configtoml')"
     >
       <span class="tab-nav-text">config.toml</span>
     </button>
@@ -4575,13 +4593,13 @@ line 3 of code
 </div><p>This can be overridden in a pages frontmatter by eg.</p>
 
   
-<div class="tab-panel" data-tab-group="4703cc2d258970edce421bf7089b4c33">
+<div class="tab-panel" data-tab-group="343a73c90ab2970416ebe0f895f625a1">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="frontmatter"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('4703cc2d258970edce421bf7089b4c33','frontmatter')"
+      onclick="switchTab('343a73c90ab2970416ebe0f895f625a1','frontmatter')"
     >
       <span class="tab-nav-text">frontmatter</span>
     </button>
@@ -4601,13 +4619,13 @@ line 3 of code
 </div><p>Or by explicitly override settings by URL query parameter</p>
 
   
-<div class="tab-panel" data-tab-group="16641e7673c49241898ab27a5c8aaa52">
+<div class="tab-panel" data-tab-group="97d3078ca53155c569db3aedc53a91c0">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="url"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('16641e7673c49241898ab27a5c8aaa52','url')"
+      onclick="switchTab('97d3078ca53155c569db3aedc53a91c0','url')"
     >
       <span class="tab-nav-text">URL</span>
     </button>
@@ -4624,13 +4642,13 @@ line 3 of code
 </div><p>The settings applied to the above image would be</p>
 
   
-<div class="tab-panel" data-tab-group="1c1760db15c8b71c80ca1ece161cf555">
+<div class="tab-panel" data-tab-group="73478f1052a49d6a98e0110f05f74e1f">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="result"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('1c1760db15c8b71c80ca1ece161cf555','result')"
+      onclick="switchTab('73478f1052a49d6a98e0110f05f74e1f','result')"
     >
       <span class="tab-nav-text">Result</span>
     </button>
@@ -4650,13 +4668,13 @@ line 3 of code
 </div><p>This ends up in the following HTML where the parameter are converted to CSS classes.</p>
 
   
-<div class="tab-panel" data-tab-group="134c2f5c3693f03eaec6728578bb38bf">
+<div class="tab-panel" data-tab-group="7c69f8a8927cfe08d081724a2cb73a7a">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="html"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('134c2f5c3693f03eaec6728578bb38bf','html')"
+      onclick="switchTab('7c69f8a8927cfe08d081724a2cb73a7a','html')"
     >
       <span class="tab-nav-text">HTML</span>
     </button>
@@ -4831,8 +4849,8 @@ However, if you want to keep the title but change its value, it can be overridde
 <li>Automatic menu generation from multilingual content</li>
 <li>In-browser language switching</li>
 </ul>
-<p><a href="#R-image-0bac0ebafc35c659faec5c41497f5de1" class="lightbox-link"><img src="./cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-0bac0ebafc35c659faec5c41497f5de1"><img src="./cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-930fff8a0732a00dba53ff90671c8391" class="lightbox-link"><img src="./cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-930fff8a0732a00dba53ff90671c8391"><img src="./cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="basic-configuration">Basic configuration</h2>
 <p>After learning <a href="https://gohugo.io/content-management/multilingual" target="_blank">how Hugo handle multilingual websites</a>, define your languages in your <code>config.toml</code> file.</p>
 <p>For example with current English and Piratized English website.</p>
@@ -6250,13 +6268,13 @@ So its content is used as description.</p>
 <p>The <code>expand</code> shortcode displays an expandable/collapsible section of text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="R-expand-98e1a92501a385e21b00f329dacf9048" aria-controls="R-expandcontent-98e1a92501a385e21b00f329dacf9048" >
-    <label class="expand-label" for="R-expand-98e1a92501a385e21b00f329dacf9048" >
+    <input type="checkbox" id="R-expand-9ef125b83a5223c1cd35ccdb0e70cd7e" aria-controls="R-expandcontent-9ef125b83a5223c1cd35ccdb0e70cd7e" >
+    <label class="expand-label" for="R-expand-9ef125b83a5223c1cd35ccdb0e70cd7e" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="R-expandcontent-98e1a92501a385e21b00f329dacf9048" class="expand-content">
+    <div id="R-expandcontent-9ef125b83a5223c1cd35ccdb0e70cd7e" class="expand-content">
 
 <p>Thank you!</p>
 <p>That&rsquo;s some text with a footnote<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
@@ -6374,26 +6392,26 @@ So its content is used as description.</p>
 <h3 id="all-defaults">All Defaults</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">you</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="R-expand-1dd5667c5c07cb4c79d630d853687200" aria-controls="R-expandcontent-1dd5667c5c07cb4c79d630d853687200" >
-    <label class="expand-label" for="R-expand-1dd5667c5c07cb4c79d630d853687200" >
+    <input type="checkbox" id="R-expand-2f8c1347663418e87d33449a8eaa7e91" aria-controls="R-expandcontent-2f8c1347663418e87d33449a8eaa7e91" >
+    <label class="expand-label" for="R-expand-2f8c1347663418e87d33449a8eaa7e91" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="R-expandcontent-1dd5667c5c07cb4c79d630d853687200" class="expand-content">
+    <div id="R-expandcontent-2f8c1347663418e87d33449a8eaa7e91" class="expand-content">
 <p>
 Yes, you did it!</div>
 </div>
 <h3 id="initially-expanded">Initially Expanded</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">to</span> <span class="nx">press</span> <span class="nx">you</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="R-expand-aee3fb94672f3c790146432db6077947" aria-controls="R-expandcontent-aee3fb94672f3c790146432db6077947"  checked>
-    <label class="expand-label" for="R-expand-aee3fb94672f3c790146432db6077947" >
+    <input type="checkbox" id="R-expand-7eb8169ff893ac7a0ee7ee56516f38d2" aria-controls="R-expandcontent-7eb8169ff893ac7a0ee7ee56516f38d2"  checked>
+    <label class="expand-label" for="R-expand-7eb8169ff893ac7a0ee7ee56516f38d2" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="R-expandcontent-aee3fb94672f3c790146432db6077947" class="expand-content">
+    <div id="R-expandcontent-7eb8169ff893ac7a0ee7ee56516f38d2" class="expand-content">
 <p>
 No need to press you!</div>
 </div>
@@ -6414,13 +6432,13 @@ No need to press you!</div>
 </span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">the</span> <span class="nx">possibilities</span> <span class="nx">are</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">including</span> <span class="nx">other</span> <span class="nx">shortcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="R-expand-f6751999cdcd9ebff43c4039a6730bfd" aria-controls="R-expandcontent-f6751999cdcd9ebff43c4039a6730bfd" >
-    <label class="expand-label" for="R-expand-f6751999cdcd9ebff43c4039a6730bfd" >
+    <input type="checkbox" id="R-expand-1de7a64e907b0b6115bf80c8798d8b70" aria-controls="R-expandcontent-1de7a64e907b0b6115bf80c8798d8b70" >
+    <label class="expand-label" for="R-expand-1de7a64e907b0b6115bf80c8798d8b70" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show me almost <strong>endless</strong> possibilities
     </label>
-    <div id="R-expandcontent-f6751999cdcd9ebff43c4039a6730bfd" class="expand-content">
+    <div id="R-expandcontent-1de7a64e907b0b6115bf80c8798d8b70" class="expand-content">
 
 <p>You can add standard markdown syntax:</p>
 <ul>
@@ -6448,13 +6466,13 @@ No need to press you!</div>
 <p>The <code>highlight</code> shortcode renders your code with a syntax highlighter.</p>
 
   
-<div class="tab-panel" data-tab-group="c0ab607cc2ab82ff4520b769373e6451">
+<div class="tab-panel" data-tab-group="9a35da6e73f15b9117338e1d7dee3fac">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('c0ab607cc2ab82ff4520b769373e6451','python')"
+      onclick="switchTab('9a35da6e73f15b9117338e1d7dee3fac','python')"
     >
       <span class="tab-nav-text">python</span>
     </button>
@@ -6666,13 +6684,13 @@ No need to press you!</div>
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>print(&#34;Hello World!&#34;)
 </span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
   
-<div class="tab-panel" data-tab-group="a7b02fab103386745d4b9c3ee69e67fd">
+<div class="tab-panel" data-tab-group="3611aa05c821720cd4be7b8e4a23d002">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('a7b02fab103386745d4b9c3ee69e67fd','python')"
+      onclick="switchTab('3611aa05c821720cd4be7b8e4a23d002','python')"
     >
       <span class="tab-nav-text">python</span>
     </button>
@@ -8168,7 +8186,7 @@ xychart-beta
 <div class="sc-openapi-wrapper is-loading helper-loading-container">
   <div
     class="sc-openapi-container"
-    id="R-openapi-31c57f1f6f0cd6725a0f68d0e49958f1"
+    id="R-openapi-401e1460b9fe01fb80df2bab2dfc253d"
     data-openapi-url="./shortcodes/openapi/petstore.json"
   ></div>
 </div>
@@ -8264,13 +8282,13 @@ xychart-beta
 <p>To use formatted parameter, add this in your <code>config.toml</code>:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">markup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">renderer</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">    <span class="nx">unsafe</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="1b46857fb21a796972cdcf06ab971698">
+<div class="tab-panel" data-tab-group="d07e8b5057603b927da29a8c849628f4">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('1b46857fb21a796972cdcf06ab971698','configtoml')"
+      onclick="switchTab('d07e8b5057603b927da29a8c849628f4','configtoml')"
     >
       <span class="tab-nav-text">config.toml</span>
     </button>
@@ -8302,13 +8320,13 @@ xychart-beta
 <p>This is especially useful if you want to flag your code example with an explicit language.</p>
 <p>If you want multiple tabs grouped together you can wrap your tabs into the <a href="./shortcodes/tabs/index.html"><code>tabs</code> shortcode</a>.</p>
 
-<div class="tab-panel" data-tab-group="9242f3a386fa1942130fb99f6ac4fd35">
+<div class="tab-panel" data-tab-group="da2b821db51f322c8c373d0b94f996b8">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('9242f3a386fa1942130fb99f6ac4fd35','c')"
+      onclick="switchTab('da2b821db51f322c8c373d0b94f996b8','c')"
     >
       <span class="tab-nav-text">c</span>
     </button>
@@ -8413,13 +8431,13 @@ xychart-beta
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="bd8f9545f37328749dc3ae32efbd1d6e">
+<div class="tab-panel" data-tab-group="8737e20f575e6139a356b02c483a0778">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="code"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('bd8f9545f37328749dc3ae32efbd1d6e','code')"
+      onclick="switchTab('8737e20f575e6139a356b02c483a0778','code')"
     >
       <span class="tab-nav-text">Code</span>
     </button>
@@ -8441,13 +8459,13 @@ xychart-beta
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="d346ec498d2a6be1e4b78c4a1e68f82c">
+<div class="tab-panel" data-tab-group="24b6caf1eb9f4644a3790f55f20a1206">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="mixed"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('d346ec498d2a6be1e4b78c4a1e68f82c','mixed')"
+      onclick="switchTab('24b6caf1eb9f4644a3790f55f20a1206','mixed')"
     >
       <span class="tab-nav-text"><em><strong>Mixed</strong></em></span>
     </button>
@@ -8492,41 +8510,41 @@ xychart-beta
 </span></span><span class="line"><span class="cl"><span class="nx">This</span> <span class="nx">will</span> <span class="nx">set</span> <span class="nx">the</span> <span class="nx">background</span> <span class="nx">to</span> <span class="nx">a</span> <span class="nx">lighter</span> <span class="nx">version</span> <span class="nx">of</span> <span class="nx">the</span> <span class="nx">chosen</span> <span class="nx">CSS</span> <span class="nx">color</span> <span class="nx">value</span> <span class="nx">and</span> <span class="nx">also</span> <span class="nx">affects</span> <span class="nx">the</span> <span class="nx">chosen</span> <span class="nx">icon</span><span class="p">.</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">&gt;}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="65834ff20f7fc3818570073314217e93">
+<div class="tab-panel" data-tab-group="a1d9b98042d25e3c30eabc54517a4c84">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="just-colored-style"
       class="tab-nav-button tab-panel-style cstyle blue active" tabindex="-1"
-      onclick="switchTab('65834ff20f7fc3818570073314217e93','just-colored-style')"
+      onclick="switchTab('a1d9b98042d25e3c30eabc54517a4c84','just-colored-style')"
     >
       <span class="tab-nav-text">just colored style</span>
     </button>
     <button
       data-tab-item="just-color"
       class="tab-nav-button tab-panel-style cstyle filled" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('65834ff20f7fc3818570073314217e93','just-color')"
+      onclick="switchTab('a1d9b98042d25e3c30eabc54517a4c84','just-color')"
     >
       <span class="tab-nav-text">just color</span>
     </button>
     <button
       data-tab-item="default-style-and-color"
       class="tab-nav-button tab-panel-style cstyle default" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('65834ff20f7fc3818570073314217e93','default-style-and-color')"
+      onclick="switchTab('a1d9b98042d25e3c30eabc54517a4c84','default-style-and-color')"
     >
       <span class="tab-nav-text">default style and color</span>
     </button>
     <button
       data-tab-item="just-severity-stylefa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info"
-      onclick="switchTab('65834ff20f7fc3818570073314217e93','just-severity-stylefa-fw-fas-fa-info-circle')"
+      onclick="switchTab('a1d9b98042d25e3c30eabc54517a4c84','just-severity-stylefa-fw-fas-fa-info-circle')"
     >
       <span class="tab-nav-text"><i class="fa-fw fas fa-info-circle"></i> just severity style</span>
     </button>
     <button
       data-tab-item="severity-style-and-colorfa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('65834ff20f7fc3818570073314217e93','severity-style-and-colorfa-fw-fas-fa-info-circle')"
+      onclick="switchTab('a1d9b98042d25e3c30eabc54517a4c84','severity-style-and-colorfa-fw-fas-fa-info-circle')"
     >
       <span class="tab-nav-text"><i class="fa-fw fas fa-info-circle"></i> severity style and color</span>
     </button>
@@ -8593,27 +8611,27 @@ xychart-beta
 <p>This comes in handy eg. for providing code snippets for multiple languages.</p>
 <p>If you just want a single tab you can instead call the <a href="./shortcodes/tab/index.html"><code>tab</code> shortcode</a> standalone.</p>
 
-<div class="tab-panel" data-tab-group="96759f36939a6bd9dc13a9e6fadde7a5">
+<div class="tab-panel" data-tab-group="4bd0d7ecdad40954b0cba4a271750be9">
   <div class="tab-nav">
     <div class="tab-nav-title">hello.</div>
     <button
       data-tab-item="py"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('96759f36939a6bd9dc13a9e6fadde7a5','py')"
+      onclick="switchTab('4bd0d7ecdad40954b0cba4a271750be9','py')"
     >
       <span class="tab-nav-text">py</span>
     </button>
     <button
       data-tab-item="sh"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('96759f36939a6bd9dc13a9e6fadde7a5','sh')"
+      onclick="switchTab('4bd0d7ecdad40954b0cba4a271750be9','sh')"
     >
       <span class="tab-nav-text">sh</span>
     </button>
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('96759f36939a6bd9dc13a9e6fadde7a5','c')"
+      onclick="switchTab('4bd0d7ecdad40954b0cba4a271750be9','c')"
     >
       <span class="tab-nav-text">c</span>
     </button>
@@ -8761,27 +8779,27 @@ xychart-beta
 <p>See what happens to the tab views while you select different tabs.</p>
 <p>While pressing a tab of Group A switches all tab views of Group A in sync (if the tab is available), the tabs of Group B are left untouched.</p>
 
-<div class="tab-panel" data-tab-group="8baba5e2ecbbbc3446c43b7cdc129fae">
+<div class="tab-panel" data-tab-group="a8b623121a5c785743ee415ea597c745">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="group-a-tab-view-1"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('8baba5e2ecbbbc3446c43b7cdc129fae','group-a-tab-view-1')"
+      onclick="switchTab('a8b623121a5c785743ee415ea597c745','group-a-tab-view-1')"
     >
       <span class="tab-nav-text">Group A, Tab View 1</span>
     </button>
     <button
       data-tab-item="group-a-tab-view-2"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('8baba5e2ecbbbc3446c43b7cdc129fae','group-a-tab-view-2')"
+      onclick="switchTab('a8b623121a5c785743ee415ea597c745','group-a-tab-view-2')"
     >
       <span class="tab-nav-text">Group A, Tab View 2</span>
     </button>
     <button
       data-tab-item="group-b"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('8baba5e2ecbbbc3446c43b7cdc129fae','group-b')"
+      onclick="switchTab('a8b623121a5c785743ee415ea597c745','group-b')"
     >
       <span class="tab-nav-text">Group B</span>
     </button>
@@ -9138,8 +9156,8 @@ xychart-beta
         </div>
       </main>
     </div>
-    <script src="./js/clipboard.min.js?1700525733" defer></script>
-    <script src="./js/perfect-scrollbar.min.js?1700525733" defer></script>
+    <script src="./js/clipboard.min.js?1700697952" defer></script>
+    <script src="./js/perfect-scrollbar.min.js?1700697952" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -9168,27 +9186,27 @@ xychart-beta
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="./js/mathjax/tex-mml-chtml.js?1700525733"></script>
-    <script src="./js/d3/d3-color.min.js?1700525733" defer></script>
-    <script src="./js/d3/d3-dispatch.min.js?1700525733" defer></script>
-    <script src="./js/d3/d3-drag.min.js?1700525733" defer></script>
-    <script src="./js/d3/d3-ease.min.js?1700525733" defer></script>
-    <script src="./js/d3/d3-interpolate.min.js?1700525733" defer></script>
-    <script src="./js/d3/d3-selection.min.js?1700525733" defer></script>
-    <script src="./js/d3/d3-timer.min.js?1700525733" defer></script>
-    <script src="./js/d3/d3-transition.min.js?1700525733" defer></script>
-    <script src="./js/d3/d3-zoom.min.js?1700525733" defer></script>
-    <script src="./js/js-yaml.min.js?1700525733" defer></script>
-    <script src="./js/mermaid.min.js?1700525733" defer></script>
+    <script id="MathJax-script" async src="./js/mathjax/tex-mml-chtml.js?1700697952"></script>
+    <script src="./js/d3/d3-color.min.js?1700697952" defer></script>
+    <script src="./js/d3/d3-dispatch.min.js?1700697952" defer></script>
+    <script src="./js/d3/d3-drag.min.js?1700697952" defer></script>
+    <script src="./js/d3/d3-ease.min.js?1700697952" defer></script>
+    <script src="./js/d3/d3-interpolate.min.js?1700697952" defer></script>
+    <script src="./js/d3/d3-selection.min.js?1700697952" defer></script>
+    <script src="./js/d3/d3-timer.min.js?1700697952" defer></script>
+    <script src="./js/d3/d3-transition.min.js?1700697952" defer></script>
+    <script src="./js/d3/d3-zoom.min.js?1700697952" defer></script>
+    <script src="./js/js-yaml.min.js?1700697952" defer></script>
+    <script src="./js/mermaid.min.js?1700697952" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
     <script>window.noZensmooth = true;</script>
-    <script src="./js/swagger-ui/swagger-ui-bundle.js?1700525733" defer></script>
-    <script src="./js/swagger-ui/swagger-ui-standalone-preset.js?1700525733" defer></script>
+    <script src="./js/swagger-ui/swagger-ui-bundle.js?1700697952" defer></script>
+    <script src="./js/swagger-ui/swagger-ui-standalone-preset.js?1700697952" defer></script>
     <script>
-      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1700525733", assetsBuster:  1700525733  };
+      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1700697952", assetsBuster:  1700697952  };
     </script>
-    <script src="./js/theme.js?1700525733" defer></script>
+    <script src="./js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/index.search.js b/index.search.js
index abfd167c26..64471096f4 100644
--- a/index.search.js
+++ b/index.search.js
@@ -43,7 +43,7 @@ var relearn_search_index = [
   },
   {
     "breadcrumb": "Basics",
-    "content": "This document shows you what’s new in the latest release and flags it with one of the following badges. For a detailed list of changes, see the history page.\n0.95.0 The minimum required Hugo version.\nBreaking A change that requires action by you after upgrading to assure the site is still functional.\nChange A change in default behavior that may requires action by you if you want to revert it.\nNew Marks new behavior you might find interesting or comes configurable.\n5.24.0.beta Change The light themes have a bit more contrast for content text and headings. Also the syntaxhighlighting was changed to the more colorful MonokaiLight. This brings the syntaxhighlightning in sync with the corresponding dark theme variants, which are using Monokai.\nNew You now can configure options for every theme variant in your config.toml. This allows for optional advanced functionality. You don’t need to change anything as the old configuration options will still work (but may generate warnings now).\nThe advanced functionality allows you to set an explicit name for a theme variant, set different colors (if you are using monochrome SVGs) or even different icons (handy if you want to adjust colors for PNGs, GIFs or JPGs) and provide an extended way to configure the automatic switch of variants based on your OS settings.\n5.23.0 (2023-11-03) Change With 0.120.0 the author settings move into the [params] array in your config.toml. Because this collides with the previous way, the theme expected author information, it now adheres to Hugo standards and prints out a warning during built if something is wrong.\nChange your previous setting from\n[params] author = \"Hugo\"to\n[params] author.name = \"Hugo\" Change Taxonomy term pages now add the breadcrumb for each listed page. If this gets too crowded for you, you can turn the breadcrumbs off in your config.toml by adding disableTermBreadcrumbs=true.\nNew Taxonomy and term pages are now allowed to contain content. This is added inbetween the title and the page list.\nNew It is now possible to print custom taxonomies anywhere in your page. See the docs.\nNew It is now possible to adjust the menu width for your whole site. See the docs.\nNew This release adds social media meta tags for the Open Graph protocol and Twitter Cards to your site. See the docs.\nNew This release comes with additional sort options for the menu and the children shortcode. Both will now accept the following values: weight, title, linktitle, modifieddate, expirydate, publishdate, date, length or default (adhering to Hugo’s default sort order).\nNew The theme now provides a mechanism to load further JavaScript dependencies defined by you only if it is needed. This comes in handy if you want to add own shortcodes that depend on additional JavaScript code to be loaded. See the docs.\nNew The theme has updated its Mermaid dependency to 10.6.0. This adds support for the xychart type.\nNew This release adds portable Markdown links.\nPreviously it was not possible to use pure Markdown links in a configuration independend way to link to pages inside of your project. It always required you to know how your uglyURLs setting is, wheather you link to a page or page bundle and in case of relative links if your current page is a page or page bundle. (eg. [generator](generator/index.html) vs. [generator](generator.html)). This is a hassle as you have to change these links manually once you change your uglyURLs setting or change the type of a page.\nYou could work around this by using the relref shortcode (eg [generator]({{% relref \"../generator\" %}})) which works but results in non-portable Markdown.\nNow it’s possible to use the same path of a call to relref in a plain Markdown link (eg [generator](../generator)). This is independend of any configuration settings or the page types involved in linking. Note, that this requires your links to be given without any extension, so [generator](generator/index.html) will work as before.\nThe following types of linking are supported:\nlink description [generator](en/basics/generator) absolute from your project root (multilang) [generator](/en/basics/generator) absolute from your project root (multilang) [generator](basics/generator) absolute from your current language root [generator](/basics/generator) absolute from your current language root [generator](./../generator) relative from the current page [generator](../generator) relative from the current page 5.22.0 (2023-10-02) Change This release fixes an issue where in unfortunate conditions DOM ids generated by Hugo may collide with DOM ids set by the theme. To avoid this, all theme DOM ids are now prefixed with R-.\nIf you haven’t modified anything, everything is fine. Otherwise you have to check your custom CSS rules and JavaScript code.\nChange You can now have structural sections in the hierarchical menu without generating a page for it.\nThis can come in handy, if content for such a section page doesn’t make much sense to you. See the documentation for how to do this.\nThis feature may require you to make changes to your existing installation if you are already using shortcuts to pages inside of your project with a headless branch parent.\nIn this case it is advised to remove the title from the headless branch parent’s frontmatter, as it will otherwise appear in your breadcrumbs.\nNew It is now possible to overwrite the setting for collapsibleMenu of your config.toml inside of a page’s frontmatter.\nNew If a Mermaid graph is zoomable a button to reset the view is now added to the upper right corner. The button is only shown once the mouse is moved over the graph.\nNew It is now possible to remove the root breadcrumb by setting disableRootBreadcrumb=true in your config.toml.\nNew The output of the dedicated search page now displays the result’s breadcrumb.\nNew Table rows now change their background color on every even row.\nNew Translation into Swahili. This language is not supported for search.\n5.21.0 (2023-09-18) Change We made changes to the menu footer to improve alignment with the menu items in most cases. Care was taken not to break your existing overwritten footer. Anyways, if you have your menu-footer.html partial overridden, you may want to review the styling (eg. margins/paddings) of your partial.\nNew This release comes with an awesome new feature, that allows you to customize your topbar buttons, change behavior, reorder them or define entirely new ones, unique to your installation. See the documentation for further details.\nNew The theme has updated its Swagger dependency to 5.7.2 for the openapi shortcode. This brings support for OpenAPI Specification 3.1.\n5.20.0 (2023-08-26) Change The theme has updated its Swagger dependency to 5.4.1 for the openapi shortcode.\nWith this comes a change in the light theme variants of Relearn Bright, Relearn Light and Zen Light by switching the syntaxhighlightning inside of openapi to a light scheme. This brings it more in sync with the code style used by the theme variants itself.\nAdditionally, the syntaxhighlightning inside of openapi for printing was switched to a light scheme for all theme variants.\nIf you dislike this change, you can revert this in your theme variants CSS by adding\n--OPENAPI-CODE-theme: obsidian; --PRINT-OPENAPI-CODE-theme: obsidian; Change For consistency reasons, we renamed the CSS variable --MENU-SECTION-HR-color to --MENU-SECTION-SEPARATOR-color. You don’t need to change anything in your custom color stylesheet as the old name will be used as a fallback.\nNew The theme variants Zen Light and Zen Dark now add more contrast between menu, topbar and content by adding thin borders.\nThose borders are now configurable by using the CSS variables --MAIN-TOPBAR-BORDER-color, --MENU-BORDER-color, --MENU-TOPBAR-BORDER-color, --MENU-TOPBAR-SEPARATOR-color, --MENU-HEADER-SEPARATOR-color and --MENU-SECTION-ACTIVE-CATEGORY-BORDER-color.\nFor existing variants nothing has changed visually.\nNew The default values for the image effects are now configurable for your whole site via config.toml or for each page thru frontmatter.\nNew This release fixes a long outstanding bug where Mermaid graphs could not be displayed if they were initially hidden - like in collapsed expand or inactive tabs.\nNew Restored compatibility with Hugo versions lower than 0.111.0 for the highlight shortcode. This does not change the minimum required Hugo version.\n5.19.0 (2023-08-12) New The highlight shortcode now accepts the new parameter title. This displays the code like a single tab. This is also available using codefences and makes it much easier to write nicer code samples.\nNew The theme has added two new color variants zen-light and zen-dark. Check it out!\nNew The theme now dispatches the custom event themeVariantLoaded on the document when the variant is fully loaded either initially or by switching the variant manually with the variant selector.\nNew The theme has updated its Mermaid dependency to 10.3.1. This adds support for the sankey diagram type and now comes with full support for YAML inside Mermaid graphs (previously, the theme ignored explicit Mermaid theme settings in YAML).\nNew Translation into Hungarian.\n5.18.0 (2023-07-27) Change The theme adds additional warnings for deprecated or now unsupported features.\nChange There are visual improvements in displaying text links in your content aswell as to some other clickable areas in the theme. If you’ve overwritten some theme styles in your own CSS, keep this in mind.\nNew Restored compatibility with Hugo 0.95.0 or higher. This does not change the minimum required Hugo version.\nNew The siteparam shortcode is now capable in displaying nested params aswell as supporting text formatting.\n5.17.0 (2023-06-22) Change The default behavior for the copy-to-clipboard feature for code blocks has changed.\nThe copy-to-clipboard button for code blocks will now only be displayed if the reader hovers the code block.\nIf you dislike this new behavior you can turn it off and revert to the old behavior by adding [params] disableHoverBlockCopyToClipBoard=true to your config.toml.\nNew Restored compatibility with Hugo 0.114.0 or higher. This does not change the minimum required Hugo version.\nNew The new highlight shortcode replaces Hugo’s default implementation and is fully compatible. So you don’t need to change anything.\nIn addition it offers some extensions. Currently only the wrap extension option is provided to control whether a code block should be wrapped or scrolled if to long to fit.\n5.16.0 (2023-06-10) Change The theme now provides warnings for deprecated or now unsupported features. The warnings include hints how to fix them and an additional link to the documenation.\nDEPRECATION warnings mark features that still work but may be removed in the future.\nUNSUPPORTED warnings mark features that will not work anymore.\nChange The 404 error page was revamped. Hopefully you will not see this very often.\nNew The tabs shortcode and the tab shortcode received some love and now align with their style, color, title and icon parameter to the other shortcodes.\nThe visuals are now slightly different compared to previous versions. Most noteable, if you now display a single code block in a tab, its default styling will adapt to that of a code block but with a tab handle at the top.\nAdditionally the name parameter was renamed to title but you don’t need to change anything yet as the old name will be used as a fallback. Nevertheless you will get deprecation warnings while executing Hugo.\nNew The theme now optionally supports separate favicons for light \u0026 dark mode.\n5.15.0 (2023-05-29) Change Restored compatibility with Hugo 0.112.0 or higher. This does not change the minimum required Hugo version.\nThe attachments shortcode has compatiblity issues with newer Hugo versions. You must switch to leaf bundles or are locked to Hugo \u003c 0.112.0 for now.\nIt is planned to refactor the attchments shortcode in the future. This will make it possible to use the shortcode in branch bundles again but not in simple pages anymore. This will most likely come with a breaking change.\nChange The tabs shortcode has changed behavior if you haven’t set the groupid parameter.\nFormerly all tab views without a groupid were treated as so they belong to the same group. Now, each tab view is treated as it was given a unique id.\nNew The already known tabshas a new friend the tab shortcode to make it easier to create a tab view in case you only need one single tab. Really handy if you want to flag your code examples with a language identifier.\nAdditionally for such a use case, the whitespace between a tab outline and the code is removed if only a single code block is contained.\nNew Besides the tag taxonomy the theme now also provides the category taxonomy out of the box and shows them in the content footer of each page.\n5.14.0 (2023-05-20) New The taxonomy pages received some love in this release, making them better leverage available screen space and adding translation support for the taxonomy names.\nHugo’s default taxonmies tags and categories are already contained in the theme’s i18n files. If you have self-defined taxonomies, you can add translations by adding them to your own i18n files. If you don’t provide translations, the singualar and plural forms are taken as configured in your config.toml.\nNew To give you more flexibility in customizing your article layout a new partial content-header.html is introduced.\nThis came out of the requirement to customize the position of article tags, which by default are displayed above the title. A second requirement was to also show additional taxonomies not supported by the theme natively. While Hugo supports tags and categories by default, the theme only displays tags.\nSo how to adjust the position of tags starting from the theme’s default where tags are only shown above the title?\nHide tags above title: Overwrite content-header.html with an empty file. Show tags between title and content: Overwrite heading-post.html and add {{- partial \"tags.html\" . }} to it. Show tags below content: Overwrite content-footer.html and add {{- partial \"tags.html\" . }} to it. New The new parameter breadcrumbSeparator is now available in your config.toml to change the - well - separator of the breadcrumb items. An appropriate default is in place if you do not configure anything.\n5.13.0 (2023-05-17) Change The swagger shortcode was deprecated in favor for the openapi shortcode. You don’t need to change anything yet as the old name will be used as a fallback. It is planned to remove the swagger shortcode in the next major release.\nAdditionally, the implemantion of this shortcode was switched from RapiDoc to SwaggerUI.\n5.12.0 (2023-05-04) Change In the effort to comply with WCAG standards, the implementation of the collapsible menu was changed (again). While Internet Explorer 11 has issues in displaying it, the functionality still works.\nNew Support for the great VSCode Front Matter extension which provides on-premise CMS capabilties to Hugo.\nThe theme provides Front Matter snippets for its shortcodes. Currently only English and German is supported. Put a reference into your frontmatter.json like this\n{ ... \"frontMatter.extends\": [ \"./vscode-frontmatter/snippets.en.json\" ] ... } New Support for languages that are written right to left (like Arabic) is now complete and extended to the menu, the top navigation bar and print. You can experience this in the pirate translation. This feature is not available in Internet Explorer 11.\nNew The scrollbars are now colored according to their variant color scheme to better fit into the visuals.\n5.11.0 (2023-02-07) Change The theme removed the popular jQuery library from its distribution.\nIn case you made changes to the theme that are dependend on this library you can place a copy of jQuery into your static/js directory and load it from your own layouts/partials/custom-header.html like this:\n\u003cscript src=\"{{\"js/jquery.min.js\"| relURL}}\" defer\u003e\u003c/script\u003e Change Mermaid diagrams can now be configured for pan and zoom on site-, page-level or individually for each graph.\nThe default setting of on, in effect since 1.1.0, changed back to off as there was interference with scrolling on mobile and big pages.\nChange The theme is now capable to visually adapt to your OS’s light/dark mode setting.\nThis is also the new default setting if you haven’t configured themeVariant in your config.toml.\nAdditionally you can configure the variants to be taken for light/dark mode with the new themeVariantAuto parameter.\nThis is not supported for Internet Explorer 11, which still displays in the relearn-light variant.\nChange The JavaScript code for handling image lightboxes (provided by Featherlight) was replaced by a CSS-only solution.\nThis also changed the lightbox effects parameter from featherlight=false to lightbox=false. Nevertheless you don’t need to change anything as the old name will be used as a fallback.\nChange In the effort to comply with WCAG standards, the implementation of the expand shortcode was changed. While Internet Explorer 11 has issues in displaying it, the functionality still works.\nNew Translation into Czech. This language is not supported for search.\nNew GitHub releases are also now tagged for the main version (eg. 1.2.x), major version (eg. 1.x) and the latest (just x) release making it easier for you to pin the theme to a certain version.\n5.10.0 (2023-01-25) New The attachments, badge, button and notice shortcodes have a new parameter color to set arbitrary CSS color values.\nAdditionally the --ACCENT-color brand color introduced in version 5.8.0 is now supported with these shortcodes.\n5.9.0 (2022-12-23) Breaking With this version it is now possible to not only have sections on the first menu level but also pages.\nIt was later discovered, that this causes pages only meant to be displayed in the More section of the menu and stored directly inside your content directory to now show up in the menu aswell.\nTo get rid of this undesired behavior you have two choices:\nMake the page file a headless branch bundle (contained in its own subdirectory and called _index.md) and add the following frontmatter configuration to the file (see exampleSite’s content/showcase/_index.en.md). This causes its content to not be ontained in the sitemap.\ntitle = \"Showcase\" [_build] render = \"always\" list = \"never\" publishResources = true Store the page file for below a parent headless branch bundle and add the following frontmatter to he parent (see exampleSite’s content/more/_index.en.md).\n# title = \"More\" ### ATTENTION: Don't give this page a title as this will cause it to be in the breadcrumbs - a thing you most likely don't want [_build] render = \"never\" list = \"never\" publishResources = falseIn this case, the file itself can be a branch bundle, leaf bundle or simple page (see exampleSite’s content/more/credits.en.md). This causes its content to be contained in the sitemap.\ntitle = \"Credits\" Change The required folder name for the attachments shortcode was changed for leaf bundles.\nPreviously, the attachments for leaf bundles in non-multilang setups were required to be in a files subdirectory. For page bundles and leaf bundles in multilang setups they were always required to be in a _index.\u003cLANGCODE\u003e.files or index.\u003cLANGCODE\u003e.files subdirectory accordingly.\nThis added unnessessary complexity. So attachments for leaf bundles in non-multilang setups can now also reside in a index.files directory. Although the old files directory is now deprecated, if both directories are present, only the old files directory will be used for compatiblity.\nChange Absolute links prefixed with http:// or https:// are now opened in a separate browser tab.\nYou can revert back to the old behavior by defining externalLinkTarget=\"_self\" in the params section of your config.toml.\nNew The theme now supports Hugo’s module system.\n5.8.0 (2022-12-08) New The new badge shortcode is now available to add highly configurable markers to your content as you can see it on this page.\nNew The new icon shortcode simplyfies the usage of icons. This can even be combined with also new badge shortcode.\nNew The theme now supports some of GFM (GitHub Flavored Markdown) syntax and Hugo Markdown extensions, namely task lists, defintion lists and footnotes.\nNew A new color --ACCENT-color was introduced which is used for highlightning search results on the page. In case you simply don’t care, you don’t need to change anything in your variant stylesheet as the old yellow color is still used as default.\n5.7.0 (2022-11-29) Change The Korean language translation for this theme is now available with the language code ko. Formerly the country code kr was used instead.\nNew The button shortcode can now also be used as a real button inside of HTML forms - although this is a pretty rare use case. The documentation was updated accordingly.\nNew The search now supports the Korean language.\n5.6.0 (2022-11-18) New This release introduces an additional dedicated search page. On this page, displayed search results have more space making it easier scanning thru large number of results.\nTo activate this feature, you need to configure it in your config.toml as a new outputformat SEARCHPAGE for the home page. If you don’t configure it, no dedicated search page will be accessible and the theme works as before.\nYou can access the search page by either clicking on the magnifier glass or pressing enter inside of the search box.\nNew Keyboard handling for the TOC and search was improved.\nPressing CTRL+ALT+t now will not only toggle the TOC overlay but also places the focus to the first heading on opening. Subsequently this makes it possible to easily select headings by using the TAB key.\nThe search received its own brand new keyboard shortcut CTRL+ALT+f. This will focus the cursor inside of the the search box so you can immediately start your search by typing.\nNew You are now able to turn off the generation of generator meta tags in your HTML head to hide the used versions of Hugo and this theme.\nTo configure this in your config.toml make sure to set Hugo’s disableHugoGeneratorInject=true and also [params] disableGeneratorVersion=true, otherwise Hugo will generate a meta tag into your home page automagically.\nNew Creation of your project gets a little bit faster with this release.\nThis addresses increased build time with the 5.x releases. The theme now heavily caches partial results leading to improved performance. To further increase performance, unnecessary parts of the page are now skipped for creation of the print output (eg. menus, navigation bar, etc.).\n5.5.0 (2022-11-06) Change The way images are processed has changed. Now images are lazy loaded by default which speeds up page load on slow networks and/or big pages and also the print preview.\nFor that the JavaScript code to handle the lightbox and image effects on the client side was removed in favour for static generation of those effects on the server.\nIf you have used HTML directly in your Markdown files, this now has the downside that it doesn’t respect the effect query parameter anymore. In this case you have to migrate all your HTML img URLs manually to the respective HTML attributes.\nOld New \u003cimg src=\"pic.png?width=20vw\u0026classes=shadow,border\"\u003e \u003cimg src=\"pic.png\" style=\"width:20vw;\" class=\"shadow border\"\u003e 5.4.0 (2022-11-01) Change With the proper settings in your config.toml your page is now servable from the local file system using file:// URLs.\nPlease note that the searchbox will only work for this if you reconfigure your outputformat for the homepage in your config.toml from JSON to SEARCH. The now deprecated JSON outputformat still works as before, so there is no need to reconfigure your installation if it is only served from http:// or https://.\nChange The button shortcode has a new parameter target to set the destination frame/window for the URL to open. If not given, it defaults to a new window/tab for external URLs or is not set at all for internal URLs. Previously even internal URLs where opened in a new window/tab.\nNew The math shortcode and mermaid shortcode now also support the align parameter if codefence syntax is used.\nNew Support for languages that are written right to left (like Arabic). This is only implemented for the content area but not the navigation sidebar. This feature is not available in Internet Explorer 11.\nNew Translation into Finnish (Suomi).\n5.3.0 (2022-10-07) Change In the effort to comply with WCAG standards, the implementation of the collapsible menu was changed. The functionality of the new implementation does not work with old browsers (Internet Explorer 11).\nNew Image formatting has two new classes to align images to the left or right. Additionally, the already existing inline option is now documented.\nNew Printing for the swagger shortcode was optimized to expand sections that are usually closed in interactive mode. This requires print support to be configured.\n5.2.0 (2022-08-03) Change If you’ve set collapsibleMenu = true in your config.toml, the menu will be expanded if a search term is found in a collapsed submenu. The menu will return to its initial collapse state once the search term does not match any submenus. 5.1.0 (2022-07-15) 0.95.0 This release requires a newer Hugo version.\nChange Because the print preview URLs were non deterministic for normal pages in comparison to page bundles, this is now changed. Each print preview is now accessible by adding a index.print.html to the default URL.\nYou can revert this behavior by overwriting the PRINT output format setting in your config.tomlto:\n[outputFormats] [outputFormats.PRINT] name= \"PRINT\" baseName = \"index\" path = \"_print\" isHTML = true mediaType = 'text/html' permalinkable = false 5.0.0 (2022-07-05) Breaking The theme changed how JavaScript and CSS dependencies are loaded to provide a better performance. In case you’ve added own JavaScript code that depends on the themes jQuery implementation, you have to put it into a separate *.js file (if not already) and add the defer keyword to the script element. Eg.\n\u003cscript defer src=\"myscript.js\"\u003e\u003c/script\u003e Change The way archetypes are used to generate output has changed. The new systems allows you, to redefine existing archetypes or even generate your own ones.\nYour existing markdown files will still work like before and therefore you don’t need to change anything after the upgrade. Nevertheless, it is recommended to adapt your existing markdown files to the new way as follows:\nfor your home page, add the frontmatter parameter archetype = \"home\" and remove the leading heading\nfor all files containing the deprecated frontmatter parameter chapter = true, replace it with archetype = \"chapter\" and remove the leading headings\nChange The frontmatter options pre / post were renamed to menuPre / menuPost. The old options will still be used if the new options aren’t set. Therefore you don’t need to change anything after the upgrade.\nNew Adding new partials heading-pre.html / heading-post.html and according frontmatter options headingPre / headingPost to modify the way your page`s main heading gets styled.\nNew The new shortcode math is available to add beautiful math and chemical formulae. See the documentation for available features. This feature will not work with Internet Explorer 11.\n4.2.0 (2022-06-23) Breaking The second parameter for the include shortcode was switched in meaning and was renamed from showfirstheading to hidefirstheading. If you haven’t used this parameter in your shortcode, the default behavior hasn’t changed and you don’t need to change anything.\nIf you’ve used the second boolean parameter, you have to rename it and invert its value to achieve the same behavior.\nChange Previously, if the tabs shortcode could not find a tab item because, the tabs ended up empty. Now the first tab is selected instead.\nChange The landingPageURL was removed from config.toml. You can safely remove this as well from your configuration as it is not used anymore. The theme will detect the landing page URL automatically and will point to the project’s homepage. If you want to support a different link, overwrite the logo.html partial.\nNew All shortcodes can now be also called from your partials. Examples for this are added to the documentation of each shortcode.\n4.1.0 (2022-06-12) New While fixing issues with the search functionality for non Latin languages, you can now configure to have multiple languages on a single page. 4.0.0 (2022-06-05) Breaking The custom_css config parameter was removed from the configuration. If used in an existing installation, it can be achieved by overriding the custom-header.html template in a much more generic manner.\nBreaking Because anchor hover color was not configurable without introducing more complexity to the variant stylesheets, we decided to remove --MAIN-ANCHOR-color instead. You don’t need to change anything in your custom color stylesheet as the anchors now get their colors from --MAIN-LINK-color and --MAIN-ANCHOR-HOVER-color respectively.\nNew All shortcodes now support named parameter. The positional parameter are still supported but will not be enhanced with new features, so you don’t need to change anything in your installation.\nThis applies to expand, include, notice and siteparam.\nNew The button shortcode received some love and now has a parameter for the color style similar to other shortcodes.\nNew New colors --PRIMARY-color and --SECONDARY-color were added to provide easier modification of your custom style. Shortcodes with a color style can now have primary or secondary as additional values.\nThese two colors are the default for other, more specific color variables. You don’t need to change anything in your existing custom color stylesheets as those variables get reasonable default values.\nNew Translation into Polish. This language is not supported for search.\nNew The documentation for all shortcodes were revised.\n3.4.0 (2022-04-03) Breaking If you had previously overwritten the custom-footer.html partial to add visual elements below the content of your page, you have to move this content to the new partial content-footer.html. custom-footer.html was never meant to contain HTML other than additional styles and JavaScript.\nNew If you prefer expandable/collapsible menu items, you can now set collapsibleMenu=true in your config.toml. This will add arrows to all menu items that contain sub menus. The menu will expand/collapse without navigation if you click on an arrow.\nNew You can activate print support in your config.toml to add the capability to print whole chapters or even the complete site.\nNew Translation into Traditional Chinese.\n3.3.0 (2022-03-28) New Introduction of new CSS variables to set the font. The theme distinguishes between --MAIN-font for all content text and --CODE-font for inline or block code. There are additional overrides for all headings. See the theme variant generator of the exampleSite for all available variables.\nNew The new shortcode swagger is available to include a UI for REST OpenAPI specifications. See the documentation for available features. This feature will not work with Internet Explorer 11.\n3.2.0 (2022-03-19) 0.93.0 This release requires a newer Hugo version.\nChange In this release the Mermaid JavaScript library will only be loaded on demand if the page contains a Mermaid shortcode or is using Mermaid codefences. This changes the behavior of disableMermaid config option as follows: If a Mermaid shortcode or codefence is found, the option will be ignored and Mermaid will be loaded regardlessly.\nThe option is still useful in case you are using scripting to set up your graph. In this case no shortcode or codefence is involved and the library is not loaded by default. In this case you can set disableMermaid=false in your frontmatter to force the library to be loaded. See the theme variant generator of the exampleSite for an example.\nNew Additional color variant variable --MERMAID-theme to set the variant’s Mermaid theme. This causes the Mermaid theme to switch with the color variant if it defers from the setting of the formerly selected color variant.\n3.1.0 (2022-03-15) New attachment and notice shortcodes have a new parameter to override the default icon. Allowed values are all Font Awesome 5 Free icons. 3.0.0 (2022-02-22) Breaking We made changes to the menu footer. If you have your menu-footer.html partial overridden, you may have to review the styling (eg. margins/paddings) in your partial. For a reference take a look into the menu-footer.html partial that is coming with the exampleSite.\nThis change was made to allow your own menu footer to be placed right after the so called prefooter that comes with the theme (containing the language switch and Clear history functionality).\nBreaking We have changed the default colors from the original Learn theme (the purple menu header) to the Relearn defaults (the light green menu header) as used in the official documentation.\nThis change will only affect your installation if you’ve not set the themeVariant parameter in your config.toml. If you still want to use the Learn color variant, you have to explicitly set themeVariant=\"learn\" in your config.toml.\nNote, that this will also affect your site if viewed with Internet Explorer 11 but in this case it can not be reconfigured as Internet Explorer does not support CSS variables.\nChange Due to a bug, that we couldn’t fix in a general manner for color variants, we decided to remove --MENU-SEARCH-BOX-ICONS-color and introduced --MENU-SEARCH-color instead. You don’t need to change anything in your custom color stylesheet as the old name will be used as a fallback.\nChange For consistency reasons, we renamed --MENU-SEARCH-BOX-color to --MENU-SEARCH-BORDER-color. You don’t need to change anything in your custom color stylesheet as the old name will be used as a fallback.\nNew With this release you are now capable to define your own dark mode variants.\nTo make this possible, we have introduced a lot more color variables you can use in your color variants. Your old variants will still work and don’t need to be changed as appropriate fallback values are used by the theme. Nevertheless, the new colors allow for much more customization.\nTo see what’s now possible, see the new variants relearn-dark and neon that are coming with this release.\nNew To make the creation of new variants easier for you, we’ve added a new interactive theme variant generator. This feature will not work with Internet Explorer 11.\nNew You can now configure multiple color variants in your config.toml. In this case, the first variant is the default chosen on first view and a variant selector will be shown in the menu footer. See the documentation for configuration.\nNote, that the new variant selector will not work with Internet Explorer 11 as it does not support CSS variables. Therefore, the variant selector will not be displayed with Internet Explorer 11.\n2.9.0 (2021-11-19) Breaking This release removes the themes implementation of ref/relref in favor for Hugos standard implementation. This is because of inconsistencies with the themes implementation. In advantage, your project becomes standard compliant and exchanging this theme in your project to some other theme will be effortless.\nIn a standard compliant form you must not link to the *.md file but to its logical name. You’ll see, referencing other pages becomes much easier. All three types result in the same reference:\nType Non-Standard Standard Branch bundle basics/configuration/_index.md basics/configuration Leaf bundle basics/configuration/index.md basics/configuration Page basics/configuration.md basics/configuration If you’ve linked from a page of one language to a page of another language, conversion is a bit more difficult but Hugo got you covered as well.\nAlso, the old themes implementation allowed refs to non-existing content. This will cause Hugos implementation to show the error below and abort the generation. If your project relies on this old behavior, you can reconfigure the error handling of Hugos implementation.\nIn the best case your usage of the old implementation is already standard compliant and you don’t need to change anything. You’ll notice this very easily once you’ve started hugo server after an upgrade and no errors are written to the console.\nYou may see errors on the console after the update in the form:\nERROR 2021/11/19 22:29:10 [en] REF_NOT_FOUND: Ref \"basics/configuration/_index.md\": \"hugo-theme-relearn\\exampleSite\\content\\_index.en.md:19:22\": page not foundIn this case, you must apply one of two options:\nStart up a text editor with regular expression support for search and replace. Search for (ref\\s+\"[^\"]*?)(?:/_index|/index)?(?:\\.md)?(#[^\"]*?)?\" and replace it by $1$2\" in all *.md files. This is the recommended choice.\nCopy the old implementation files theme/hugo-theme-relearn/layouts/shortcode/ref.html and theme/hugo-theme-relearn/layouts/shortcode/relref.html to your own projects layouts/shortcode/ref.html and layouts/shortcode/relref.html respectively. This is not recommended as your project will still rely on non-standard behavior afterwards.\n2.8.0 (2021-11-03) Change Although never officially documented, this release removes the font Novacento/Novecento. If you use it in an overwritten CSS please replace it with Work Sans. This change was necessary as Novacento did not provide all Latin special characters and lead to mixed styled character text eg. for Czech.\nNew The theme now supports favicons served from static/images/ named as favicon or logo in SVG, PNG or ICO format out of the box. An overridden partial layouts/partials/favicon.html may not be necessary anymore in most cases.\nNew You can hide the table of contents menu for the whole site by setting the disableToc option in your config.toml. For an example see the example configuration.\n2.7.0 (2021-10-24) New Optional second parameter for notice shortcode to set title in box header. 2.6.0 (2021-10-21) New Your site can now be served from a subfolder if you set baseURL and canonifyURLs=true in your config.toml. See the documentation for a detailed example. 2.5.0 (2021-10-08) Change New colors --CODE-BLOCK-color and --CODE-BLOCK-BG-color were added to provide a fallback for Hugos syntax highlighting in case guessSyntax=true is set. Ideally the colors are set to the same values as the ones from your chosen chroma style. 2.4.0 (2021-10-07) Change Creation of customized stylesheets was simplified down to only contain the CSS variables. Everything else can and should be deleted from your custom stylesheet to assure everything works fine. For the predefined stylesheet variants, this change is already included.\nNew Hidden pages are displayed by default in their according tags page. You can now turn off this behavior by setting disableTagHiddenPages=true in your config.toml.\nNew You can define the expansion state of your menus for the whole site by setting the alwaysopen option in your config.toml. Please see further documentation for possible values and default behavior.\nNew New frontmatter ordersectionsby option to change immediate children sorting in menu and children shortcode. Possible values are title or weight.\nNew Alternate content of a page is now advertised in the HTML meta tags. See Hugo documentation.\n2.3.0 (2021-09-13) 0.81.0 This release requires a newer Hugo version.\nNew Showcase multilanguage features by providing a documentation translation “fer us pirrrates”. There will be no other translations besides the original English one and the Pirates one due to maintenance constraints.\n2.2.0 (2021-09-09) New Hidden pages are displayed by default in the sitemap generated by Hugo and are therefore visible for search engine indexing. You can now turn off this behavior by setting disableSeoHiddenPages=true in your config.toml. 2.1.0 (2021-09-07) 0.69.0 This release requires a newer Hugo version.\nChange In case the site’s structure contains additional *.md files not part of the site (eg files that are meant to be included by site pages - see CHANGELOG.md in the exampleSite), they will now be ignored by the search.\nNew Hidden pages are indexed for the site search by default. You can now turn off this behavior by setting disableSearchHiddenPages=true in your config.toml.\nNew If a search term is found in an expand shortcode, the expand will be opened.\nNew The menu will scroll the active item into view on load.\n2.0.0 (2021-08-28) Change Syntax highlighting was switched to the built in Hugo mechanism. You may need to configure a new stylesheet or decide to roll you own as described on in the Hugo documentation\nChange In the predefined stylesheets there was a typo and --MENU-HOME-LINK-HOVERED-color must be changed to --MENU-HOME-LINK-HOVER-color. You don’t need to change anything in your custom color stylesheet as the old name will be used as a fallback.\nChange --MENU-HOME-LINK-color and --MENU-HOME-LINK-HOVER-color were missing in the documentation. You should add them to your custom stylesheets if you want to override the defaults.\nChange Arrow navigation and children shortcode were ignoring setting for ordersectionsby. This is now changed and may result in different sorting order of your sub pages.\nChange If hidden pages are accessed directly by typing their URL, they will be exposed in the menu.\nChange A page without a title will be treated as hidden=true.\nNew You can define the expansion state of your menus in the frontmatter. Please see further documentation for possible values and default behavior.\nNew New partials for defining pre/post content for menu items and the content. See documentation for further reading.\nNew Shortcode children with new parameter containerstyle.\nNew New shortcode include to include arbitrary file content into a page.\n1.2.0 (2021-07-26) New Shortcode expand with new parameter to open on page load. 1.1.0 (2021-07-02) Breaking Mermaid diagrams can now be panned and zoomed. This isn’t configurable yet.\nNew Mermaid config options can be set in config.toml.\n1.0.0 (2021-07-01) 0.65.0 The requirement for the Hugo version of this theme is the same as for the Learn theme version 2.5.0 on 2021-07-01.\nNew Initial fork of the Learn theme based on Learn 2.5.0 on 2021-07-01. This introduces no new features besides a global rename to Relearn and a new logo. For the reasons behind forking the Learn theme, see this comment in the Learn issues.\n",
+    "content": "This document shows you what’s new in the latest release and flags it with one of the following badges. For a detailed list of changes, see the history page.\n0.95.0 The minimum required Hugo version.\nBreaking A change that requires action by you after upgrading to assure the site is still functional.\nChange A change in default behavior that may requires action by you if you want to revert it.\nNew Marks new behavior you might find interesting or comes configurable.\n5.24.0.beta Change The light themes have a bit more contrast for content text and headings. Also the syntaxhighlighting was changed to the more colorful MonokaiLight. This brings the syntaxhighlightning in sync with the corresponding dark theme variants, which are using Monokai.\nNew You now can configure additional options for every theme variant in your config.toml. This allows for optional advanced functionality. You don’t need to change anything as the old configuration options will still work (but may generate warnings now).\nThe advanced functionality allows you to set an explicit name for a theme variant, set different colors (if you are using monochrome SVGs) or even different icons (handy if you want to adjust colors for PNGs, GIFs or JPGs) and now allows for multiple auto mode variants that adjust to the light/dark preference of your OS settings.\n5.23.0 (2023-11-03) Change With 0.120.0 the author settings move into the [params] array in your config.toml. Because this collides with the previous way, the theme expected author information, it now adheres to Hugo standards and prints out a warning during built if something is wrong.\nChange your previous setting from\n[params] author = \"Hugo\"to\n[params] author.name = \"Hugo\" Change Taxonomy term pages now add the breadcrumb for each listed page. If this gets too crowded for you, you can turn the breadcrumbs off in your config.toml by adding disableTermBreadcrumbs=true.\nNew Taxonomy and term pages are now allowed to contain content. This is added inbetween the title and the page list.\nNew It is now possible to print custom taxonomies anywhere in your page. See the docs.\nNew It is now possible to adjust the menu width for your whole site. See the docs.\nNew This release adds social media meta tags for the Open Graph protocol and Twitter Cards to your site. See the docs.\nNew This release comes with additional sort options for the menu and the children shortcode. Both will now accept the following values: weight, title, linktitle, modifieddate, expirydate, publishdate, date, length or default (adhering to Hugo’s default sort order).\nNew The theme now provides a mechanism to load further JavaScript dependencies defined by you only if it is needed. This comes in handy if you want to add own shortcodes that depend on additional JavaScript code to be loaded. See the docs.\nNew The theme has updated its Mermaid dependency to 10.6.0. This adds support for the xychart type.\nNew This release adds portable Markdown links.\nPreviously it was not possible to use pure Markdown links in a configuration independend way to link to pages inside of your project. It always required you to know how your uglyURLs setting is, wheather you link to a page or page bundle and in case of relative links if your current page is a page or page bundle. (eg. [generator](generator/index.html) vs. [generator](generator.html)). This is a hassle as you have to change these links manually once you change your uglyURLs setting or change the type of a page.\nYou could work around this by using the relref shortcode (eg [generator]({{% relref \"../generator\" %}})) which works but results in non-portable Markdown.\nNow it’s possible to use the same path of a call to relref in a plain Markdown link (eg [generator](../generator)). This is independend of any configuration settings or the page types involved in linking. Note, that this requires your links to be given without any extension, so [generator](generator/index.html) will work as before.\nThe following types of linking are supported:\nlink description [generator](en/basics/generator) absolute from your project root (multilang) [generator](/en/basics/generator) absolute from your project root (multilang) [generator](basics/generator) absolute from your current language root [generator](/basics/generator) absolute from your current language root [generator](./../generator) relative from the current page [generator](../generator) relative from the current page 5.22.0 (2023-10-02) Change This release fixes an issue where in unfortunate conditions DOM ids generated by Hugo may collide with DOM ids set by the theme. To avoid this, all theme DOM ids are now prefixed with R-.\nIf you haven’t modified anything, everything is fine. Otherwise you have to check your custom CSS rules and JavaScript code.\nChange You can now have structural sections in the hierarchical menu without generating a page for it.\nThis can come in handy, if content for such a section page doesn’t make much sense to you. See the documentation for how to do this.\nThis feature may require you to make changes to your existing installation if you are already using shortcuts to pages inside of your project with a headless branch parent.\nIn this case it is advised to remove the title from the headless branch parent’s frontmatter, as it will otherwise appear in your breadcrumbs.\nNew It is now possible to overwrite the setting for collapsibleMenu of your config.toml inside of a page’s frontmatter.\nNew If a Mermaid graph is zoomable a button to reset the view is now added to the upper right corner. The button is only shown once the mouse is moved over the graph.\nNew It is now possible to remove the root breadcrumb by setting disableRootBreadcrumb=true in your config.toml.\nNew The output of the dedicated search page now displays the result’s breadcrumb.\nNew Table rows now change their background color on every even row.\nNew Translation into Swahili. This language is not supported for search.\n5.21.0 (2023-09-18) Change We made changes to the menu footer to improve alignment with the menu items in most cases. Care was taken not to break your existing overwritten footer. Anyways, if you have your menu-footer.html partial overridden, you may want to review the styling (eg. margins/paddings) of your partial.\nNew This release comes with an awesome new feature, that allows you to customize your topbar buttons, change behavior, reorder them or define entirely new ones, unique to your installation. See the documentation for further details.\nNew The theme has updated its Swagger dependency to 5.7.2 for the openapi shortcode. This brings support for OpenAPI Specification 3.1.\n5.20.0 (2023-08-26) Change The theme has updated its Swagger dependency to 5.4.1 for the openapi shortcode.\nWith this comes a change in the light theme variants of Relearn Bright, Relearn Light and Zen Light by switching the syntaxhighlightning inside of openapi to a light scheme. This brings it more in sync with the code style used by the theme variants itself.\nAdditionally, the syntaxhighlightning inside of openapi for printing was switched to a light scheme for all theme variants.\nIf you dislike this change, you can revert this in your theme variants CSS by adding\n--OPENAPI-CODE-theme: obsidian; --PRINT-OPENAPI-CODE-theme: obsidian; Change For consistency reasons, we renamed the CSS variable --MENU-SECTION-HR-color to --MENU-SECTION-SEPARATOR-color. You don’t need to change anything in your custom color stylesheet as the old name will be used as a fallback.\nNew The theme variants Zen Light and Zen Dark now add more contrast between menu, topbar and content by adding thin borders.\nThose borders are now configurable by using the CSS variables --MAIN-TOPBAR-BORDER-color, --MENU-BORDER-color, --MENU-TOPBAR-BORDER-color, --MENU-TOPBAR-SEPARATOR-color, --MENU-HEADER-SEPARATOR-color and --MENU-SECTION-ACTIVE-CATEGORY-BORDER-color.\nFor existing variants nothing has changed visually.\nNew The default values for the image effects are now configurable for your whole site via config.toml or for each page thru frontmatter.\nNew This release fixes a long outstanding bug where Mermaid graphs could not be displayed if they were initially hidden - like in collapsed expand or inactive tabs.\nNew Restored compatibility with Hugo versions lower than 0.111.0 for the highlight shortcode. This does not change the minimum required Hugo version.\n5.19.0 (2023-08-12) New The highlight shortcode now accepts the new parameter title. This displays the code like a single tab. This is also available using codefences and makes it much easier to write nicer code samples.\nNew The theme has added two new color variants zen-light and zen-dark. Check it out!\nNew The theme now dispatches the custom event themeVariantLoaded on the document when the variant is fully loaded either initially or by switching the variant manually with the variant selector.\nNew The theme has updated its Mermaid dependency to 10.3.1. This adds support for the sankey diagram type and now comes with full support for YAML inside Mermaid graphs (previously, the theme ignored explicit Mermaid theme settings in YAML).\nNew Translation into Hungarian.\n5.18.0 (2023-07-27) Change The theme adds additional warnings for deprecated or now unsupported features.\nChange There are visual improvements in displaying text links in your content aswell as to some other clickable areas in the theme. If you’ve overwritten some theme styles in your own CSS, keep this in mind.\nNew Restored compatibility with Hugo 0.95.0 or higher. This does not change the minimum required Hugo version.\nNew The siteparam shortcode is now capable in displaying nested params aswell as supporting text formatting.\n5.17.0 (2023-06-22) Change The default behavior for the copy-to-clipboard feature for code blocks has changed.\nThe copy-to-clipboard button for code blocks will now only be displayed if the reader hovers the code block.\nIf you dislike this new behavior you can turn it off and revert to the old behavior by adding [params] disableHoverBlockCopyToClipBoard=true to your config.toml.\nNew Restored compatibility with Hugo 0.114.0 or higher. This does not change the minimum required Hugo version.\nNew The new highlight shortcode replaces Hugo’s default implementation and is fully compatible. So you don’t need to change anything.\nIn addition it offers some extensions. Currently only the wrap extension option is provided to control whether a code block should be wrapped or scrolled if to long to fit.\n5.16.0 (2023-06-10) Change The theme now provides warnings for deprecated or now unsupported features. The warnings include hints how to fix them and an additional link to the documenation.\nDEPRECATION warnings mark features that still work but may be removed in the future.\nUNSUPPORTED warnings mark features that will not work anymore.\nChange The 404 error page was revamped. Hopefully you will not see this very often.\nNew The tabs shortcode and the tab shortcode received some love and now align with their style, color, title and icon parameter to the other shortcodes.\nThe visuals are now slightly different compared to previous versions. Most noteable, if you now display a single code block in a tab, its default styling will adapt to that of a code block but with a tab handle at the top.\nAdditionally the name parameter was renamed to title but you don’t need to change anything yet as the old name will be used as a fallback. Nevertheless you will get deprecation warnings while executing Hugo.\nNew The theme now optionally supports separate favicons for light \u0026 dark mode.\n5.15.0 (2023-05-29) Change Restored compatibility with Hugo 0.112.0 or higher. This does not change the minimum required Hugo version.\nThe attachments shortcode has compatiblity issues with newer Hugo versions. You must switch to leaf bundles or are locked to Hugo \u003c 0.112.0 for now.\nIt is planned to refactor the attchments shortcode in the future. This will make it possible to use the shortcode in branch bundles again but not in simple pages anymore. This will most likely come with a breaking change.\nChange The tabs shortcode has changed behavior if you haven’t set the groupid parameter.\nFormerly all tab views without a groupid were treated as so they belong to the same group. Now, each tab view is treated as it was given a unique id.\nNew The already known tabshas a new friend the tab shortcode to make it easier to create a tab view in case you only need one single tab. Really handy if you want to flag your code examples with a language identifier.\nAdditionally for such a use case, the whitespace between a tab outline and the code is removed if only a single code block is contained.\nNew Besides the tag taxonomy the theme now also provides the category taxonomy out of the box and shows them in the content footer of each page.\n5.14.0 (2023-05-20) New The taxonomy pages received some love in this release, making them better leverage available screen space and adding translation support for the taxonomy names.\nHugo’s default taxonmies tags and categories are already contained in the theme’s i18n files. If you have self-defined taxonomies, you can add translations by adding them to your own i18n files. If you don’t provide translations, the singualar and plural forms are taken as configured in your config.toml.\nNew To give you more flexibility in customizing your article layout a new partial content-header.html is introduced.\nThis came out of the requirement to customize the position of article tags, which by default are displayed above the title. A second requirement was to also show additional taxonomies not supported by the theme natively. While Hugo supports tags and categories by default, the theme only displays tags.\nSo how to adjust the position of tags starting from the theme’s default where tags are only shown above the title?\nHide tags above title: Overwrite content-header.html with an empty file. Show tags between title and content: Overwrite heading-post.html and add {{- partial \"tags.html\" . }} to it. Show tags below content: Overwrite content-footer.html and add {{- partial \"tags.html\" . }} to it. New The new parameter breadcrumbSeparator is now available in your config.toml to change the - well - separator of the breadcrumb items. An appropriate default is in place if you do not configure anything.\n5.13.0 (2023-05-17) Change The swagger shortcode was deprecated in favor for the openapi shortcode. You don’t need to change anything yet as the old name will be used as a fallback. It is planned to remove the swagger shortcode in the next major release.\nAdditionally, the implemantion of this shortcode was switched from RapiDoc to SwaggerUI.\n5.12.0 (2023-05-04) Change In the effort to comply with WCAG standards, the implementation of the collapsible menu was changed (again). While Internet Explorer 11 has issues in displaying it, the functionality still works.\nNew Support for the great VSCode Front Matter extension which provides on-premise CMS capabilties to Hugo.\nThe theme provides Front Matter snippets for its shortcodes. Currently only English and German is supported. Put a reference into your frontmatter.json like this\n{ ... \"frontMatter.extends\": [ \"./vscode-frontmatter/snippets.en.json\" ] ... } New Support for languages that are written right to left (like Arabic) is now complete and extended to the menu, the top navigation bar and print. You can experience this in the pirate translation. This feature is not available in Internet Explorer 11.\nNew The scrollbars are now colored according to their variant color scheme to better fit into the visuals.\n5.11.0 (2023-02-07) Change The theme removed the popular jQuery library from its distribution.\nIn case you made changes to the theme that are dependend on this library you can place a copy of jQuery into your static/js directory and load it from your own layouts/partials/custom-header.html like this:\n\u003cscript src=\"{{\"js/jquery.min.js\"| relURL}}\" defer\u003e\u003c/script\u003e Change Mermaid diagrams can now be configured for pan and zoom on site-, page-level or individually for each graph.\nThe default setting of on, in effect since 1.1.0, changed back to off as there was interference with scrolling on mobile and big pages.\nChange The theme is now capable to visually adapt to your OS’s light/dark mode setting.\nThis is also the new default setting if you haven’t configured themeVariant in your config.toml.\nAdditionally you can configure the variants to be taken for light/dark mode with the new themeVariantAuto parameter.\nThis is not supported for Internet Explorer 11, which still displays in the relearn-light variant.\nChange The JavaScript code for handling image lightboxes (provided by Featherlight) was replaced by a CSS-only solution.\nThis also changed the lightbox effects parameter from featherlight=false to lightbox=false. Nevertheless you don’t need to change anything as the old name will be used as a fallback.\nChange In the effort to comply with WCAG standards, the implementation of the expand shortcode was changed. While Internet Explorer 11 has issues in displaying it, the functionality still works.\nNew Translation into Czech. This language is not supported for search.\nNew GitHub releases are also now tagged for the main version (eg. 1.2.x), major version (eg. 1.x) and the latest (just x) release making it easier for you to pin the theme to a certain version.\n5.10.0 (2023-01-25) New The attachments, badge, button and notice shortcodes have a new parameter color to set arbitrary CSS color values.\nAdditionally the --ACCENT-color brand color introduced in version 5.8.0 is now supported with these shortcodes.\n5.9.0 (2022-12-23) Breaking With this version it is now possible to not only have sections on the first menu level but also pages.\nIt was later discovered, that this causes pages only meant to be displayed in the More section of the menu and stored directly inside your content directory to now show up in the menu aswell.\nTo get rid of this undesired behavior you have two choices:\nMake the page file a headless branch bundle (contained in its own subdirectory and called _index.md) and add the following frontmatter configuration to the file (see exampleSite’s content/showcase/_index.en.md). This causes its content to not be ontained in the sitemap.\ntitle = \"Showcase\" [_build] render = \"always\" list = \"never\" publishResources = true Store the page file for below a parent headless branch bundle and add the following frontmatter to he parent (see exampleSite’s content/more/_index.en.md).\n# title = \"More\" ### ATTENTION: Don't give this page a title as this will cause it to be in the breadcrumbs - a thing you most likely don't want [_build] render = \"never\" list = \"never\" publishResources = falseIn this case, the file itself can be a branch bundle, leaf bundle or simple page (see exampleSite’s content/more/credits.en.md). This causes its content to be contained in the sitemap.\ntitle = \"Credits\" Change The required folder name for the attachments shortcode was changed for leaf bundles.\nPreviously, the attachments for leaf bundles in non-multilang setups were required to be in a files subdirectory. For page bundles and leaf bundles in multilang setups they were always required to be in a _index.\u003cLANGCODE\u003e.files or index.\u003cLANGCODE\u003e.files subdirectory accordingly.\nThis added unnessessary complexity. So attachments for leaf bundles in non-multilang setups can now also reside in a index.files directory. Although the old files directory is now deprecated, if both directories are present, only the old files directory will be used for compatiblity.\nChange Absolute links prefixed with http:// or https:// are now opened in a separate browser tab.\nYou can revert back to the old behavior by defining externalLinkTarget=\"_self\" in the params section of your config.toml.\nNew The theme now supports Hugo’s module system.\n5.8.0 (2022-12-08) New The new badge shortcode is now available to add highly configurable markers to your content as you can see it on this page.\nNew The new icon shortcode simplyfies the usage of icons. This can even be combined with also new badge shortcode.\nNew The theme now supports some of GFM (GitHub Flavored Markdown) syntax and Hugo Markdown extensions, namely task lists, defintion lists and footnotes.\nNew A new color --ACCENT-color was introduced which is used for highlightning search results on the page. In case you simply don’t care, you don’t need to change anything in your variant stylesheet as the old yellow color is still used as default.\n5.7.0 (2022-11-29) Change The Korean language translation for this theme is now available with the language code ko. Formerly the country code kr was used instead.\nNew The button shortcode can now also be used as a real button inside of HTML forms - although this is a pretty rare use case. The documentation was updated accordingly.\nNew The search now supports the Korean language.\n5.6.0 (2022-11-18) New This release introduces an additional dedicated search page. On this page, displayed search results have more space making it easier scanning thru large number of results.\nTo activate this feature, you need to configure it in your config.toml as a new outputformat SEARCHPAGE for the home page. If you don’t configure it, no dedicated search page will be accessible and the theme works as before.\nYou can access the search page by either clicking on the magnifier glass or pressing enter inside of the search box.\nNew Keyboard handling for the TOC and search was improved.\nPressing CTRL+ALT+t now will not only toggle the TOC overlay but also places the focus to the first heading on opening. Subsequently this makes it possible to easily select headings by using the TAB key.\nThe search received its own brand new keyboard shortcut CTRL+ALT+f. This will focus the cursor inside of the the search box so you can immediately start your search by typing.\nNew You are now able to turn off the generation of generator meta tags in your HTML head to hide the used versions of Hugo and this theme.\nTo configure this in your config.toml make sure to set Hugo’s disableHugoGeneratorInject=true and also [params] disableGeneratorVersion=true, otherwise Hugo will generate a meta tag into your home page automagically.\nNew Creation of your project gets a little bit faster with this release.\nThis addresses increased build time with the 5.x releases. The theme now heavily caches partial results leading to improved performance. To further increase performance, unnecessary parts of the page are now skipped for creation of the print output (eg. menus, navigation bar, etc.).\n5.5.0 (2022-11-06) Change The way images are processed has changed. Now images are lazy loaded by default which speeds up page load on slow networks and/or big pages and also the print preview.\nFor that the JavaScript code to handle the lightbox and image effects on the client side was removed in favour for static generation of those effects on the server.\nIf you have used HTML directly in your Markdown files, this now has the downside that it doesn’t respect the effect query parameter anymore. In this case you have to migrate all your HTML img URLs manually to the respective HTML attributes.\nOld New \u003cimg src=\"pic.png?width=20vw\u0026classes=shadow,border\"\u003e \u003cimg src=\"pic.png\" style=\"width:20vw;\" class=\"shadow border\"\u003e 5.4.0 (2022-11-01) Change With the proper settings in your config.toml your page is now servable from the local file system using file:// URLs.\nPlease note that the searchbox will only work for this if you reconfigure your outputformat for the homepage in your config.toml from JSON to SEARCH. The now deprecated JSON outputformat still works as before, so there is no need to reconfigure your installation if it is only served from http:// or https://.\nChange The button shortcode has a new parameter target to set the destination frame/window for the URL to open. If not given, it defaults to a new window/tab for external URLs or is not set at all for internal URLs. Previously even internal URLs where opened in a new window/tab.\nNew The math shortcode and mermaid shortcode now also support the align parameter if codefence syntax is used.\nNew Support for languages that are written right to left (like Arabic). This is only implemented for the content area but not the navigation sidebar. This feature is not available in Internet Explorer 11.\nNew Translation into Finnish (Suomi).\n5.3.0 (2022-10-07) Change In the effort to comply with WCAG standards, the implementation of the collapsible menu was changed. The functionality of the new implementation does not work with old browsers (Internet Explorer 11).\nNew Image formatting has two new classes to align images to the left or right. Additionally, the already existing inline option is now documented.\nNew Printing for the swagger shortcode was optimized to expand sections that are usually closed in interactive mode. This requires print support to be configured.\n5.2.0 (2022-08-03) Change If you’ve set collapsibleMenu = true in your config.toml, the menu will be expanded if a search term is found in a collapsed submenu. The menu will return to its initial collapse state once the search term does not match any submenus. 5.1.0 (2022-07-15) 0.95.0 This release requires a newer Hugo version.\nChange Because the print preview URLs were non deterministic for normal pages in comparison to page bundles, this is now changed. Each print preview is now accessible by adding a index.print.html to the default URL.\nYou can revert this behavior by overwriting the PRINT output format setting in your config.tomlto:\n[outputFormats] [outputFormats.PRINT] name= \"PRINT\" baseName = \"index\" path = \"_print\" isHTML = true mediaType = 'text/html' permalinkable = false 5.0.0 (2022-07-05) Breaking The theme changed how JavaScript and CSS dependencies are loaded to provide a better performance. In case you’ve added own JavaScript code that depends on the themes jQuery implementation, you have to put it into a separate *.js file (if not already) and add the defer keyword to the script element. Eg.\n\u003cscript defer src=\"myscript.js\"\u003e\u003c/script\u003e Change The way archetypes are used to generate output has changed. The new systems allows you, to redefine existing archetypes or even generate your own ones.\nYour existing markdown files will still work like before and therefore you don’t need to change anything after the upgrade. Nevertheless, it is recommended to adapt your existing markdown files to the new way as follows:\nfor your home page, add the frontmatter parameter archetype = \"home\" and remove the leading heading\nfor all files containing the deprecated frontmatter parameter chapter = true, replace it with archetype = \"chapter\" and remove the leading headings\nChange The frontmatter options pre / post were renamed to menuPre / menuPost. The old options will still be used if the new options aren’t set. Therefore you don’t need to change anything after the upgrade.\nNew Adding new partials heading-pre.html / heading-post.html and according frontmatter options headingPre / headingPost to modify the way your page`s main heading gets styled.\nNew The new shortcode math is available to add beautiful math and chemical formulae. See the documentation for available features. This feature will not work with Internet Explorer 11.\n4.2.0 (2022-06-23) Breaking The second parameter for the include shortcode was switched in meaning and was renamed from showfirstheading to hidefirstheading. If you haven’t used this parameter in your shortcode, the default behavior hasn’t changed and you don’t need to change anything.\nIf you’ve used the second boolean parameter, you have to rename it and invert its value to achieve the same behavior.\nChange Previously, if the tabs shortcode could not find a tab item because, the tabs ended up empty. Now the first tab is selected instead.\nChange The landingPageURL was removed from config.toml. You can safely remove this as well from your configuration as it is not used anymore. The theme will detect the landing page URL automatically and will point to the project’s homepage. If you want to support a different link, overwrite the logo.html partial.\nNew All shortcodes can now be also called from your partials. Examples for this are added to the documentation of each shortcode.\n4.1.0 (2022-06-12) New While fixing issues with the search functionality for non Latin languages, you can now configure to have multiple languages on a single page. 4.0.0 (2022-06-05) Breaking The custom_css config parameter was removed from the configuration. If used in an existing installation, it can be achieved by overriding the custom-header.html template in a much more generic manner.\nBreaking Because anchor hover color was not configurable without introducing more complexity to the variant stylesheets, we decided to remove --MAIN-ANCHOR-color instead. You don’t need to change anything in your custom color stylesheet as the anchors now get their colors from --MAIN-LINK-color and --MAIN-ANCHOR-HOVER-color respectively.\nNew All shortcodes now support named parameter. The positional parameter are still supported but will not be enhanced with new features, so you don’t need to change anything in your installation.\nThis applies to expand, include, notice and siteparam.\nNew The button shortcode received some love and now has a parameter for the color style similar to other shortcodes.\nNew New colors --PRIMARY-color and --SECONDARY-color were added to provide easier modification of your custom style. Shortcodes with a color style can now have primary or secondary as additional values.\nThese two colors are the default for other, more specific color variables. You don’t need to change anything in your existing custom color stylesheets as those variables get reasonable default values.\nNew Translation into Polish. This language is not supported for search.\nNew The documentation for all shortcodes were revised.\n3.4.0 (2022-04-03) Breaking If you had previously overwritten the custom-footer.html partial to add visual elements below the content of your page, you have to move this content to the new partial content-footer.html. custom-footer.html was never meant to contain HTML other than additional styles and JavaScript.\nNew If you prefer expandable/collapsible menu items, you can now set collapsibleMenu=true in your config.toml. This will add arrows to all menu items that contain sub menus. The menu will expand/collapse without navigation if you click on an arrow.\nNew You can activate print support in your config.toml to add the capability to print whole chapters or even the complete site.\nNew Translation into Traditional Chinese.\n3.3.0 (2022-03-28) New Introduction of new CSS variables to set the font. The theme distinguishes between --MAIN-font for all content text and --CODE-font for inline or block code. There are additional overrides for all headings. See the theme variant generator of the exampleSite for all available variables.\nNew The new shortcode swagger is available to include a UI for REST OpenAPI specifications. See the documentation for available features. This feature will not work with Internet Explorer 11.\n3.2.0 (2022-03-19) 0.93.0 This release requires a newer Hugo version.\nChange In this release the Mermaid JavaScript library will only be loaded on demand if the page contains a Mermaid shortcode or is using Mermaid codefences. This changes the behavior of disableMermaid config option as follows: If a Mermaid shortcode or codefence is found, the option will be ignored and Mermaid will be loaded regardlessly.\nThe option is still useful in case you are using scripting to set up your graph. In this case no shortcode or codefence is involved and the library is not loaded by default. In this case you can set disableMermaid=false in your frontmatter to force the library to be loaded. See the theme variant generator of the exampleSite for an example.\nNew Additional color variant variable --MERMAID-theme to set the variant’s Mermaid theme. This causes the Mermaid theme to switch with the color variant if it defers from the setting of the formerly selected color variant.\n3.1.0 (2022-03-15) New attachment and notice shortcodes have a new parameter to override the default icon. Allowed values are all Font Awesome 5 Free icons. 3.0.0 (2022-02-22) Breaking We made changes to the menu footer. If you have your menu-footer.html partial overridden, you may have to review the styling (eg. margins/paddings) in your partial. For a reference take a look into the menu-footer.html partial that is coming with the exampleSite.\nThis change was made to allow your own menu footer to be placed right after the so called prefooter that comes with the theme (containing the language switch and Clear history functionality).\nBreaking We have changed the default colors from the original Learn theme (the purple menu header) to the Relearn defaults (the light green menu header) as used in the official documentation.\nThis change will only affect your installation if you’ve not set the themeVariant parameter in your config.toml. If you still want to use the Learn color variant, you have to explicitly set themeVariant=\"learn\" in your config.toml.\nNote, that this will also affect your site if viewed with Internet Explorer 11 but in this case it can not be reconfigured as Internet Explorer does not support CSS variables.\nChange Due to a bug, that we couldn’t fix in a general manner for color variants, we decided to remove --MENU-SEARCH-BOX-ICONS-color and introduced --MENU-SEARCH-color instead. You don’t need to change anything in your custom color stylesheet as the old name will be used as a fallback.\nChange For consistency reasons, we renamed --MENU-SEARCH-BOX-color to --MENU-SEARCH-BORDER-color. You don’t need to change anything in your custom color stylesheet as the old name will be used as a fallback.\nNew With this release you are now capable to define your own dark mode variants.\nTo make this possible, we have introduced a lot more color variables you can use in your color variants. Your old variants will still work and don’t need to be changed as appropriate fallback values are used by the theme. Nevertheless, the new colors allow for much more customization.\nTo see what’s now possible, see the new variants relearn-dark and neon that are coming with this release.\nNew To make the creation of new variants easier for you, we’ve added a new interactive theme variant generator. This feature will not work with Internet Explorer 11.\nNew You can now configure multiple color variants in your config.toml. In this case, the first variant is the default chosen on first view and a variant selector will be shown in the menu footer. See the documentation for configuration.\nNote, that the new variant selector will not work with Internet Explorer 11 as it does not support CSS variables. Therefore, the variant selector will not be displayed with Internet Explorer 11.\n2.9.0 (2021-11-19) Breaking This release removes the themes implementation of ref/relref in favor for Hugos standard implementation. This is because of inconsistencies with the themes implementation. In advantage, your project becomes standard compliant and exchanging this theme in your project to some other theme will be effortless.\nIn a standard compliant form you must not link to the *.md file but to its logical name. You’ll see, referencing other pages becomes much easier. All three types result in the same reference:\nType Non-Standard Standard Branch bundle basics/configuration/_index.md basics/configuration Leaf bundle basics/configuration/index.md basics/configuration Page basics/configuration.md basics/configuration If you’ve linked from a page of one language to a page of another language, conversion is a bit more difficult but Hugo got you covered as well.\nAlso, the old themes implementation allowed refs to non-existing content. This will cause Hugos implementation to show the error below and abort the generation. If your project relies on this old behavior, you can reconfigure the error handling of Hugos implementation.\nIn the best case your usage of the old implementation is already standard compliant and you don’t need to change anything. You’ll notice this very easily once you’ve started hugo server after an upgrade and no errors are written to the console.\nYou may see errors on the console after the update in the form:\nERROR 2021/11/19 22:29:10 [en] REF_NOT_FOUND: Ref \"basics/configuration/_index.md\": \"hugo-theme-relearn\\exampleSite\\content\\_index.en.md:19:22\": page not foundIn this case, you must apply one of two options:\nStart up a text editor with regular expression support for search and replace. Search for (ref\\s+\"[^\"]*?)(?:/_index|/index)?(?:\\.md)?(#[^\"]*?)?\" and replace it by $1$2\" in all *.md files. This is the recommended choice.\nCopy the old implementation files theme/hugo-theme-relearn/layouts/shortcode/ref.html and theme/hugo-theme-relearn/layouts/shortcode/relref.html to your own projects layouts/shortcode/ref.html and layouts/shortcode/relref.html respectively. This is not recommended as your project will still rely on non-standard behavior afterwards.\n2.8.0 (2021-11-03) Change Although never officially documented, this release removes the font Novacento/Novecento. If you use it in an overwritten CSS please replace it with Work Sans. This change was necessary as Novacento did not provide all Latin special characters and lead to mixed styled character text eg. for Czech.\nNew The theme now supports favicons served from static/images/ named as favicon or logo in SVG, PNG or ICO format out of the box. An overridden partial layouts/partials/favicon.html may not be necessary anymore in most cases.\nNew You can hide the table of contents menu for the whole site by setting the disableToc option in your config.toml. For an example see the example configuration.\n2.7.0 (2021-10-24) New Optional second parameter for notice shortcode to set title in box header. 2.6.0 (2021-10-21) New Your site can now be served from a subfolder if you set baseURL and canonifyURLs=true in your config.toml. See the documentation for a detailed example. 2.5.0 (2021-10-08) Change New colors --CODE-BLOCK-color and --CODE-BLOCK-BG-color were added to provide a fallback for Hugos syntax highlighting in case guessSyntax=true is set. Ideally the colors are set to the same values as the ones from your chosen chroma style. 2.4.0 (2021-10-07) Change Creation of customized stylesheets was simplified down to only contain the CSS variables. Everything else can and should be deleted from your custom stylesheet to assure everything works fine. For the predefined stylesheet variants, this change is already included.\nNew Hidden pages are displayed by default in their according tags page. You can now turn off this behavior by setting disableTagHiddenPages=true in your config.toml.\nNew You can define the expansion state of your menus for the whole site by setting the alwaysopen option in your config.toml. Please see further documentation for possible values and default behavior.\nNew New frontmatter ordersectionsby option to change immediate children sorting in menu and children shortcode. Possible values are title or weight.\nNew Alternate content of a page is now advertised in the HTML meta tags. See Hugo documentation.\n2.3.0 (2021-09-13) 0.81.0 This release requires a newer Hugo version.\nNew Showcase multilanguage features by providing a documentation translation “fer us pirrrates”. There will be no other translations besides the original English one and the Pirates one due to maintenance constraints.\n2.2.0 (2021-09-09) New Hidden pages are displayed by default in the sitemap generated by Hugo and are therefore visible for search engine indexing. You can now turn off this behavior by setting disableSeoHiddenPages=true in your config.toml. 2.1.0 (2021-09-07) 0.69.0 This release requires a newer Hugo version.\nChange In case the site’s structure contains additional *.md files not part of the site (eg files that are meant to be included by site pages - see CHANGELOG.md in the exampleSite), they will now be ignored by the search.\nNew Hidden pages are indexed for the site search by default. You can now turn off this behavior by setting disableSearchHiddenPages=true in your config.toml.\nNew If a search term is found in an expand shortcode, the expand will be opened.\nNew The menu will scroll the active item into view on load.\n2.0.0 (2021-08-28) Change Syntax highlighting was switched to the built in Hugo mechanism. You may need to configure a new stylesheet or decide to roll you own as described on in the Hugo documentation\nChange In the predefined stylesheets there was a typo and --MENU-HOME-LINK-HOVERED-color must be changed to --MENU-HOME-LINK-HOVER-color. You don’t need to change anything in your custom color stylesheet as the old name will be used as a fallback.\nChange --MENU-HOME-LINK-color and --MENU-HOME-LINK-HOVER-color were missing in the documentation. You should add them to your custom stylesheets if you want to override the defaults.\nChange Arrow navigation and children shortcode were ignoring setting for ordersectionsby. This is now changed and may result in different sorting order of your sub pages.\nChange If hidden pages are accessed directly by typing their URL, they will be exposed in the menu.\nChange A page without a title will be treated as hidden=true.\nNew You can define the expansion state of your menus in the frontmatter. Please see further documentation for possible values and default behavior.\nNew New partials for defining pre/post content for menu items and the content. See documentation for further reading.\nNew Shortcode children with new parameter containerstyle.\nNew New shortcode include to include arbitrary file content into a page.\n1.2.0 (2021-07-26) New Shortcode expand with new parameter to open on page load. 1.1.0 (2021-07-02) Breaking Mermaid diagrams can now be panned and zoomed. This isn’t configurable yet.\nNew Mermaid config options can be set in config.toml.\n1.0.0 (2021-07-01) 0.65.0 The requirement for the Hugo version of this theme is the same as for the Learn theme version 2.5.0 on 2021-07-01.\nNew Initial fork of the Learn theme based on Learn 2.5.0 on 2021-07-01. This introduces no new features besides a global rename to Relearn and a new logo. For the reasons behind forking the Learn theme, see this comment in the Learn issues.\n",
     "description": "",
     "tags": null,
     "title": "What's New",
@@ -138,7 +138,7 @@ var relearn_search_index = [
   },
   {
     "breadcrumb": "Basics",
-    "content": "On top of Hugo’s global configuration options, the Relearn theme lets you define further options unique to the theme in your config.toml. The defaults are written in the comments of each option.\nNote that some of these options are explained in detail in other sections of this documentation.\n​ config.toml [params] # If an option value is said to be not set, you can achieve the same behavior # by given it an empty string value. ############################################################################### # Hugo # These options usually apply to other themes aswell. # The author of your site. # Default: not set # This will be used in HTML meta tags, the opengraph protocol and twitter # cards. # You can also set `author.email` if you want to publish this information. author.name = \"Sören Weber\" # The social media image of your site. # Default: not set # This is used for generating social media meta information for the opengraph # protocol and twitter cards. # This can be overridden in the page's frontmatter. images = [ \"images/hero.png\" ] # The description of your site. # Default: not set # This is used for generating HTML meta tags, social media meta information # for the opengraph protocol and twitter cards. # This can be overridden in the page's frontmatter. description = \"Documentation for Hugo Relearn Theme\" # Admin options for social media. # Default: not set # Configuration for the Open Graph protocol and Twitter Cards adhere to Hugo's # implementation. See the Hugo docs for possible values. social.facebook_admin = \"\" social.twitter = \"\" ############################################################################### # Relearn Theme # These options are specific to the Relearn theme. #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Variants # These options set your color variant. # Used color variants. # Default: \"auto\" # This sets one or more color variants, available to your readers to choose # from. You can # - set a single value eg. \"zen-light\" # - an array like [ \"neon\", \"learn\" ] # - an array with options like [ { identifier = \"neon\" },{ identifier = \"learn\" } ] # The last form allows to set further options for each variant. # The `identifier` is mandatory. You can also set `name` which overrides the # value displayed in the variant selector. # If the array has more than one entry, a variant selector # is shown in the lower part of the menu. The first entry in the array is the # default variant, used for first time visitors. # The theme ships with the following variants: \"auto\", \"relearn-bright\", # \"relearn-light\", \"relearn-dark\", \"zen-light\", \"zen-dark\", \"neon\", \"learn\", # \"blue\", \"green\", \"red\". The auto variant is somewhat special. See the # option for themeVariantAuto below. # You can also define your own variants. See the docs how this works. Also, # the docs provide an interactive theme generator to help you with this task. themeVariant = [ { identifier = \"auto\" }, { identifier = \"relearn-light\" }, { identifier = \"relearn-dark\" }, { identifier = \"zen-light\" }, { identifier = \"zen-dark\" }, { identifier = \"neon\" }, { identifier = \"learn\" }, { identifier = \"blue\" }, { identifier = \"green\" }, { identifier = \"red\" } ] # The color variants used for auto mode. # Default: [ \"relearn-light\", \"relearn-dark\" ], overwritten by the first # two non-auto options of your `themeVariant` option if present. # The auto variant defines how your site adjusts to your selected OS settings # for light/dark mode. The first array element is the variant for light mode, # the second for dark mode. themeVariantAuto = [ \"relearn-light\", \"relearn-dark\" ] #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # General # These options are defining general, non visual behavior. # Avoid new asset URLs on build. # Default: false # By default JavaScript-files and CSS-files get a unique ID on each rebuild. # This makes sure, the user always has the latest version and not some stale # copy of his browser cache. Anyways, it can be desireable to turn this # off in certain circumstances. For example if you have Hugo's dev server # running. Also some proxies dislike this optimization. disableAssetsBusting = false # Avoid generator meta tags. # Default: false # Set this to true if you want to disable generation for generator meta tags # of Hugo and the theme in your HTML head. In tihs case also don't forget to # set Hugo's disableHugoGeneratorInject=true. Otherwise Hugo will generate a # meta tag into your home page anyways. disableGeneratorVersion = false # Avoid unique IDs. # Default: false # In various situations the theme generates non stable unique ids to be used # in HTML fragment links. This can be undesirable for example when testing # the output for changes. If you disable the random id generation, the theme # may not function correctly anymore. disableRandomIds = false # Multilanguage content. # Default: not set # If your pages contain further languages besides the main one used, add all # those auxiliary languages here. This will create a search index with # support for all used languages of your site. # This is handy for example if you are writing in Spanish but have lots of # source code on your page which typically uses English terminology. additionalContentLanguage = [ \"en\" ] # Additional code dependencies. # Default: See config.toml of the theme # The theme provides a mechanism to load further JavaScript and CSS # dependencies on demand only if they are needed. This comes in handy if you # want to add own shortcodes that depend on additional code to be loaded. # See the docs how this works. # [relearn.dependencies] #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Topbar # These options modify the topbar appearance. # Hide the table of contents button. # Default: false # If the TOC button is hidden, also the keyboard shortcut is disabled. # This can be overridden in the page's frontmatter. disableToc = false # Hide the breadcrumbs. # Default: false # If the breadcrumbs are hidden, the title of the displayed page will still be # shown in the topbar. disableBreadcrumb = false # Hide Next and Previous navigation buttons. # Default: false # If the navigation buttons are hidden, also the keyboard shortcuts are # disabled. disableNextPrev = false # The URL prefix to edit a page. # Default: not set # If set, an edit button will be shown in the topbar. If the button is hidden, # also the keyboard shortcuts are disabled. The given URL is prepended to the # relative file path of a the displayed page. The URL must end with a `/`. # This is useful if you wnat to give the opportunity for people to create merge # request for your content. editURL = \"https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/\" #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Menu # These options modify the menu apperance. # Hide the search box. # Default: false # If the searc box is sisabled, the search functionality is disabled too. # This will also cause the keyboard shortcut to be disabled and the dedicated # search page is not linked although it mighty be configured. disableSearch = false # Hide the Home entry. # Default: false # If shown, a Home button will appear below the search bar and the main menu. # It links to your the home page of the current language. disableLandingPageButton = true # The order of main menu submenus. # Default: \"weight\" # Submenus can be ordered by \"weight\", \"title\", \"linktitle\", \"modifieddate\", # \"expirydate\", \"publishdate\", \"date\", \"length\" or \"default\" (adhering to # Hugo's default sort order). This can be overridden in the pages frontmatter. ordersectionsby = \"weight\" # The initial expand state of submenus. # Default: not set # This controls whether submenus will be expanded (true), or collapsed (false) # in the menu. If not set, the first menu level is set to false, all others # levels are set to true. This can be overridden in the page's frontmatter. # If the displayed page has submenus, they will always been displayed expanded # regardless of this option. alwaysopen = \"\" # Shows expander for submenus. # Default: false # If set to true, a submenu in the sidebar will be displayed in a collapsible # tree view and a clickable expander is set in front of the entry. collapsibleMenu = true # Shows checkmarks for visited pages of the main menu. # Default: false # This also causes the display of the `Clear History` entry in the lower part # of the menu to remove all checkmarks. The checkmarks will also been removed # if you regenerate your site as the ids are not stable. showVisitedLinks = true # Hide heading above the shortcut menu. # Default: false # The title for the heading can be overwritten in your i18n files. See Hugo's # documentation how to do this. disableShortcutsTitle = false # Hide the language switcher. # Default: false # If you have more than one language configured, a language switcher is # displayed in the lower part of the menu. This opition lets you explicitly # turn this behavior off. disableLanguageSwitchingButton = false #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Hidden pages # These options configure how hidden pages are treated. # A page flagged as hidden, is only removed from the main menu but behaves # like any other page for all other functionality in Hugo. # Hide hidden pages from search. # Default: false # Hides hidden pages from the suggestions of the search box and the dedicated # search page. disableSearchHiddenPages = false # Hide hidden pages for web crawlers. # Default: false # Avoids hidden pages from showing up in the sitemap and on Google (et all), # otherwise they may be indexed by search engines disableSeoHiddenPages = true # Hide hidden pages for taxonomies. # Default: false # Hides hidden pages from showing up on the taxonomy and terms pages. If this # reduces term counters to zero, an empty but not linked term page will be # created anyhow. disableTagHiddenPages = false #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Content # These options modify how your content is displayed. # Title separator. # Default: \"::\" # Changes the title separator used when concatenating the page title with the # site title. This is consistently used throughout the theme. titleSeparator = \"::\" # Breadcrumb separator. # Default: \"\u003e\" # Changes the breadcrumb separator used in the topbars breadcrumb area and for # search results and term pages. breadcrumbSeparator = \"\u003e\" # Hide the root breadcrumb. # Default: false # The root breadcrumb is usually the home page of your site. Because this is # always accessible by clicking on the logo, you may want to reduce clutter # by removing this from your breadcrumb. disableRootBreadcrumb = true # Hide breadcrumbs term pages. # Default: false # If you have lots of taxonomy terms, the term pages may seem cluttered with # breadcrumbs to you, so this is the option to turn off breadcrumbs on term # pages. Only the page title will then be shown on the term pages. disableTermBreadcrumbs = false #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Highlight # These options configure how code is displayed. # Hide copy-to-clipboard for inline code. # Default: false # This removes the copy-to-clipboard button from your inline code. disableInlineCopyToClipBoard = true # Always show copy-to-clipboard for block code. # Default: false # The theme only shows the copy-to-clipboard button if you hover over the code # block. Set this to true to disable the hover effect and always show the # button. disableHoverBlockCopyToClipBoard = false # Wrap for code blocks. # Default: true # By default lines of code blocks wrap around if the line is too long to be # displayed on screen. If you dislike this behavior, you can reconfigure it # here. # Note that lines always wrap in print mode regardless of this option. # This can be overridden in the page's frontmatter or given as a parameter to # individual code blocks. highlightWrap = true #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Images # These options configure how images are displayed. # Image effects. # See the documentation for how you can even add your own arbitrary effects to # the list. # All effects can be overridden in the page's frontmatter or thru URL parameter # given to the image. See the documentation for details. # Default: false imageEffects.border = true # Default: true imageEffects.lightbox = true # Default: false imageEffects.shadow = false #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Links # These options configure how links are displayed. # How to open external links. # Default: \"_blank\" # For external links you can define how they are opened in your browser. All # values for the HTML `target` attribute of the `a` element are allowed. The # default value opens external links in a separate browser tab. If you want # to open those links in the same tab, use \"_self\". externalLinkTarget = \"_blank\" # Generate link URLs the Hugo way. # Default: false # If set to true, the theme behaves like a standard Hugo installation and # appends no index.html to prettyURLs. As a trade off, your build project will # not be servable from the file system. disableExplicitIndexURLs = false #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Mermaid # These options configure how Mermaid graphs are displayed. # Make graphs panable and zoomable # Default: false # For huge graphs it can be helpful to make them zoomable. Zoomable graphs come # with a reset button for the zoom. # This can be overridden in the page's frontmatter or given as a parameter to # individual graphs. mermaidZoom = true # Initialization options for Mermaid. # Default: not set # A JSON value. See the Mermaid documentation for possible parameter. # This can be overridden in the page's frontmatter. mermaidInitialize = \"{ \\\"securityLevel\\\": \\\"loose\\\" }\" # Only load Mermaid if needed. # Default: true # If a Mermaid shortcode or codefence is found, the option will be ignored and # Mermaid will be loaded regardlessly. The option is still useful in case you # are using scripting to set up your graph. In this case no shortcode or # codefence is involved and the library is not loaded by default. In this case # you can set `disableMermaid=false` in your frontmatter to force the library to # be loaded. # This can be overridden in the page's frontmatter. disableMermaid = true # URL for external Mermaid library. # Default: not set # Specifies the remote location of the Mermaid library. By default the shipped # version will be used. # This can be overridden in the page's frontmatter. customMermaidURL = \"\" # \"https://unpkg.com/mermaid/dist/mermaid.min.js\" #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # MathJax # These options configure how math formulae are displayed. # Initialization options for MathJax. # Default: not set # A JSON value. See the MathJaxdocumentation for possible parameter. # This can be overridden in the page's frontmatter. mathJaxInitialize = \"{}\" # Only load MathJax if needed. # Default: true # If a Math shortcode is found, the option will be ignored and # MathJax will be loaded regardlessly. The option is still useful in case you # are using scripting to set up your graph. In this case no shortcode or # codefence is involved and the library is not loaded by default. In this case # you can set `disableMathJax=false` in your frontmatter to force the library to # be loaded. # This can be overridden in the page's frontmatter. disableMathJax = true # URL for external MathJax library. # Default: not set # Specifies the remote location of the MathJax library. By default the shipped # version will be used. # This can be overridden in the page's frontmatter. customMathJaxURL = \"\" # \"https://unpkg.com/mathjax/es5/tex-mml-chtml.js\" #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # OpenApi # These options configure how OpenAPI specifications are displayed. # Only load OpenAPI if needed. # Default: true # If a OpenAPI shortcode is found, the option will be ignored and # OpenAPI will be loaded regardlessly. The option is still useful in case you # are using scripting to set up your graph. In this case no shortcode or # codefence is involved and the library is not loaded by default. In this case # you can set `disableOpenapi=false` in your frontmatter to force the library to # be loaded. # This can be overridden in the page's frontmatter. disableOpenapi = true # URL for external OpenAPI library. # Default: not set # Specifies the remote location of the OpenAPI library. By default the shipped # version will be used. # This can be overridden in the page's frontmatter. customOpenapiURL = \"\" # \"https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js\" ",
+    "content": "On top of Hugo’s global configuration options, the Relearn theme lets you define further options unique to the theme in your config.toml. The defaults are written in the comments of each option.\nNote that some of these options are explained in detail in other sections of this documentation.\n​ config.toml [params] # If an option value is said to be not set, you can achieve the same behavior # by given it an empty string value. ############################################################################### # Hugo # These options usually apply to other themes aswell. # The author of your site. # Default: not set # This will be used in HTML meta tags, the opengraph protocol and twitter # cards. # You can also set `author.email` if you want to publish this information. author.name = \"Sören Weber\" # The social media image of your site. # Default: not set # This is used for generating social media meta information for the opengraph # protocol and twitter cards. # This can be overridden in the page's frontmatter. images = [ \"images/hero.png\" ] # The description of your site. # Default: not set # This is used for generating HTML meta tags, social media meta information # for the opengraph protocol and twitter cards. # This can be overridden in the page's frontmatter. description = \"Documentation for Hugo Relearn Theme\" # Admin options for social media. # Default: not set # Configuration for the Open Graph protocol and Twitter Cards adhere to Hugo's # implementation. See the Hugo docs for possible values. social.facebook_admin = \"\" social.twitter = \"\" ############################################################################### # Relearn Theme # These options are specific to the Relearn theme. #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Variants # These options set your color variant. # Used color variants. # Default: \"auto\" # This sets one or more color variants, available to your readers to choose # from. You can # - set a single value eg. \"zen-light\" # - an array like [ \"neon\", \"learn\" ] # - an array with options like [ { identifier = \"neon\" },{ identifier = \"learn\" } ] # The last form allows to set further options for each variant. # The `identifier` is mandatory. You can also set `name` which overrides the # value displayed in the variant selector. # If the array has more than one entry, a variant selector # is shown in the lower part of the menu. The first entry in the array is the # default variant, used for first time visitors. # The theme ships with the following variants: \"auto\", \"relearn-bright\", # \"relearn-light\", \"relearn-dark\", \"zen-light\", \"zen-dark\", \"neon\", \"learn\", # \"blue\", \"green\", \"red\". The auto variant is somewhat special. See the # option for themeVariantAuto below. # You can also define your own variants. See the docs how this works. Also, # the docs provide an interactive theme generator to help you with this task. themeVariant = [ { identifier = \"relearn-auto\", name = \"Relearn Light/Dark\", auto = [] }, { identifier = \"relearn-light\" }, { identifier = \"relearn-dark\" }, { identifier = \"relearn-bright\" }, { identifier = \"zen-auto\", name = \"Zen Light/Dark\", auto = [ \"zen-light\", \"zen-dark\" ] }, { identifier = \"zen-light\" }, { identifier = \"zen-dark\" }, { identifier = \"neon\" }, { identifier = \"learn\" }, { identifier = \"blue\" }, { identifier = \"green\" }, { identifier = \"red\" } ] #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # General # These options are defining general, non visual behavior. # Avoid new asset URLs on build. # Default: false # By default JavaScript-files and CSS-files get a unique ID on each rebuild. # This makes sure, the user always has the latest version and not some stale # copy of his browser cache. Anyways, it can be desireable to turn this # off in certain circumstances. For example if you have Hugo's dev server # running. Also some proxies dislike this optimization. disableAssetsBusting = false # Avoid generator meta tags. # Default: false # Set this to true if you want to disable generation for generator meta tags # of Hugo and the theme in your HTML head. In tihs case also don't forget to # set Hugo's disableHugoGeneratorInject=true. Otherwise Hugo will generate a # meta tag into your home page anyways. disableGeneratorVersion = false # Avoid unique IDs. # Default: false # In various situations the theme generates non stable unique ids to be used # in HTML fragment links. This can be undesirable for example when testing # the output for changes. If you disable the random id generation, the theme # may not function correctly anymore. disableRandomIds = false # Multilanguage content. # Default: not set # If your pages contain further languages besides the main one used, add all # those auxiliary languages here. This will create a search index with # support for all used languages of your site. # This is handy for example if you are writing in Spanish but have lots of # source code on your page which typically uses English terminology. additionalContentLanguage = [ \"en\" ] # Additional code dependencies. # Default: See config.toml of the theme # The theme provides a mechanism to load further JavaScript and CSS # dependencies on demand only if they are needed. This comes in handy if you # want to add own shortcodes that depend on additional code to be loaded. # See the docs how this works. # [relearn.dependencies] #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Topbar # These options modify the topbar appearance. # Hide the table of contents button. # Default: false # If the TOC button is hidden, also the keyboard shortcut is disabled. # This can be overridden in the page's frontmatter. disableToc = false # Hide the breadcrumbs. # Default: false # If the breadcrumbs are hidden, the title of the displayed page will still be # shown in the topbar. disableBreadcrumb = false # Hide Next and Previous navigation buttons. # Default: false # If the navigation buttons are hidden, also the keyboard shortcuts are # disabled. disableNextPrev = false # The URL prefix to edit a page. # Default: not set # If set, an edit button will be shown in the topbar. If the button is hidden, # also the keyboard shortcuts are disabled. The given URL is prepended to the # relative file path of a the displayed page. The URL must end with a `/`. # This is useful if you wnat to give the opportunity for people to create merge # request for your content. editURL = \"https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/\" #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Menu # These options modify the menu apperance. # Hide the search box. # Default: false # If the searc box is sisabled, the search functionality is disabled too. # This will also cause the keyboard shortcut to be disabled and the dedicated # search page is not linked although it mighty be configured. disableSearch = false # Hide the Home entry. # Default: false # If shown, a Home button will appear below the search bar and the main menu. # It links to your the home page of the current language. disableLandingPageButton = true # The order of main menu submenus. # Default: \"weight\" # Submenus can be ordered by \"weight\", \"title\", \"linktitle\", \"modifieddate\", # \"expirydate\", \"publishdate\", \"date\", \"length\" or \"default\" (adhering to # Hugo's default sort order). This can be overridden in the pages frontmatter. ordersectionsby = \"weight\" # The initial expand state of submenus. # Default: not set # This controls whether submenus will be expanded (true), or collapsed (false) # in the menu. If not set, the first menu level is set to false, all others # levels are set to true. This can be overridden in the page's frontmatter. # If the displayed page has submenus, they will always been displayed expanded # regardless of this option. alwaysopen = \"\" # Shows expander for submenus. # Default: false # If set to true, a submenu in the sidebar will be displayed in a collapsible # tree view and a clickable expander is set in front of the entry. collapsibleMenu = true # Shows checkmarks for visited pages of the main menu. # Default: false # This also causes the display of the `Clear History` entry in the lower part # of the menu to remove all checkmarks. The checkmarks will also been removed # if you regenerate your site as the ids are not stable. showVisitedLinks = true # Hide heading above the shortcut menu. # Default: false # The title for the heading can be overwritten in your i18n files. See Hugo's # documentation how to do this. disableShortcutsTitle = false # Hide the language switcher. # Default: false # If you have more than one language configured, a language switcher is # displayed in the lower part of the menu. This opition lets you explicitly # turn this behavior off. disableLanguageSwitchingButton = false #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Hidden pages # These options configure how hidden pages are treated. # A page flagged as hidden, is only removed from the main menu but behaves # like any other page for all other functionality in Hugo. # Hide hidden pages from search. # Default: false # Hides hidden pages from the suggestions of the search box and the dedicated # search page. disableSearchHiddenPages = false # Hide hidden pages for web crawlers. # Default: false # Avoids hidden pages from showing up in the sitemap and on Google (et all), # otherwise they may be indexed by search engines disableSeoHiddenPages = true # Hide hidden pages for taxonomies. # Default: false # Hides hidden pages from showing up on the taxonomy and terms pages. If this # reduces term counters to zero, an empty but not linked term page will be # created anyhow. disableTagHiddenPages = false #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Content # These options modify how your content is displayed. # Title separator. # Default: \"::\" # Changes the title separator used when concatenating the page title with the # site title. This is consistently used throughout the theme. titleSeparator = \"::\" # Breadcrumb separator. # Default: \"\u003e\" # Changes the breadcrumb separator used in the topbars breadcrumb area and for # search results and term pages. breadcrumbSeparator = \"\u003e\" # Hide the root breadcrumb. # Default: false # The root breadcrumb is usually the home page of your site. Because this is # always accessible by clicking on the logo, you may want to reduce clutter # by removing this from your breadcrumb. disableRootBreadcrumb = true # Hide breadcrumbs term pages. # Default: false # If you have lots of taxonomy terms, the term pages may seem cluttered with # breadcrumbs to you, so this is the option to turn off breadcrumbs on term # pages. Only the page title will then be shown on the term pages. disableTermBreadcrumbs = false #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Highlight # These options configure how code is displayed. # Hide copy-to-clipboard for inline code. # Default: false # This removes the copy-to-clipboard button from your inline code. disableInlineCopyToClipBoard = true # Always show copy-to-clipboard for block code. # Default: false # The theme only shows the copy-to-clipboard button if you hover over the code # block. Set this to true to disable the hover effect and always show the # button. disableHoverBlockCopyToClipBoard = false # Wrap for code blocks. # Default: true # By default lines of code blocks wrap around if the line is too long to be # displayed on screen. If you dislike this behavior, you can reconfigure it # here. # Note that lines always wrap in print mode regardless of this option. # This can be overridden in the page's frontmatter or given as a parameter to # individual code blocks. highlightWrap = true #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Images # These options configure how images are displayed. # Image effects. # See the documentation for how you can even add your own arbitrary effects to # the list. # All effects can be overridden in the page's frontmatter or thru URL parameter # given to the image. See the documentation for details. # Default: false imageEffects.border = true # Default: true imageEffects.lightbox = true # Default: false imageEffects.shadow = false #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Links # These options configure how links are displayed. # How to open external links. # Default: \"_blank\" # For external links you can define how they are opened in your browser. All # values for the HTML `target` attribute of the `a` element are allowed. The # default value opens external links in a separate browser tab. If you want # to open those links in the same tab, use \"_self\". externalLinkTarget = \"_blank\" # Generate link URLs the Hugo way. # Default: false # If set to true, the theme behaves like a standard Hugo installation and # appends no index.html to prettyURLs. As a trade off, your build project will # not be servable from the file system. disableExplicitIndexURLs = false #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Mermaid # These options configure how Mermaid graphs are displayed. # Make graphs panable and zoomable # Default: false # For huge graphs it can be helpful to make them zoomable. Zoomable graphs come # with a reset button for the zoom. # This can be overridden in the page's frontmatter or given as a parameter to # individual graphs. mermaidZoom = true # Initialization options for Mermaid. # Default: not set # A JSON value. See the Mermaid documentation for possible parameter. # This can be overridden in the page's frontmatter. mermaidInitialize = \"{ \\\"securityLevel\\\": \\\"loose\\\" }\" # Only load Mermaid if needed. # Default: true # If a Mermaid shortcode or codefence is found, the option will be ignored and # Mermaid will be loaded regardlessly. The option is still useful in case you # are using scripting to set up your graph. In this case no shortcode or # codefence is involved and the library is not loaded by default. In this case # you can set `disableMermaid=false` in your frontmatter to force the library to # be loaded. # This can be overridden in the page's frontmatter. disableMermaid = true # URL for external Mermaid library. # Default: not set # Specifies the remote location of the Mermaid library. By default the shipped # version will be used. # This can be overridden in the page's frontmatter. customMermaidURL = \"\" # \"https://unpkg.com/mermaid/dist/mermaid.min.js\" #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # MathJax # These options configure how math formulae are displayed. # Initialization options for MathJax. # Default: not set # A JSON value. See the MathJaxdocumentation for possible parameter. # This can be overridden in the page's frontmatter. mathJaxInitialize = \"{}\" # Only load MathJax if needed. # Default: true # If a Math shortcode is found, the option will be ignored and # MathJax will be loaded regardlessly. The option is still useful in case you # are using scripting to set up your graph. In this case no shortcode or # codefence is involved and the library is not loaded by default. In this case # you can set `disableMathJax=false` in your frontmatter to force the library to # be loaded. # This can be overridden in the page's frontmatter. disableMathJax = true # URL for external MathJax library. # Default: not set # Specifies the remote location of the MathJax library. By default the shipped # version will be used. # This can be overridden in the page's frontmatter. customMathJaxURL = \"\" # \"https://unpkg.com/mathjax/es5/tex-mml-chtml.js\" #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # OpenApi # These options configure how OpenAPI specifications are displayed. # Only load OpenAPI if needed. # Default: true # If a OpenAPI shortcode is found, the option will be ignored and # OpenAPI will be loaded regardlessly. The option is still useful in case you # are using scripting to set up your graph. In this case no shortcode or # codefence is involved and the library is not loaded by default. In this case # you can set `disableOpenapi=false` in your frontmatter to force the library to # be loaded. # This can be overridden in the page's frontmatter. disableOpenapi = true # URL for external OpenAPI library. # Default: not set # Specifies the remote location of the OpenAPI library. By default the shipped # version will be used. # This can be overridden in the page's frontmatter. customOpenapiURL = \"\" # \"https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js\" ",
     "description": "",
     "tags": [
       "config"
@@ -159,7 +159,7 @@ var relearn_search_index = [
   },
   {
     "breadcrumb": "Basics",
-    "content": "The Relearn theme provides configuration options to change your your site’s colors, favicon and logo. This allows you to easily align your site visuals to your desired style. Most of these options are exposed thru so called color variants.\nA color variant lets you customize various visual effects of your site like almost any color, used fonts, color schemes of print, syntax highligtning, Mermaid and the OpenAPI shortcode, etc. It contains of a CSS file and optional configuration options in your config.toml.\nThe Relearn theme ships with a wide set of different color variants. You can use them as-is, copy them over and use them as a starting point for your customizations or just create completely new variants unique to your site. The interactive variant generator may help you with this task.\nOnce configured in your config.toml, you can select them with the variant selector at the bottom of the menu.\nChange the Variant (Simple) Single Variant Set the themeVariant value to the name of your theme file. That’s it! Your site will be displayed in this variant only.\n[params] themeVariant = \"relearn-light\" Note Your theme variant file must reside in your site’s static/css directory or in the theme’s static/css directory and the file name must start with theme- and end wit .css. In the above example, the path of your theme file must be static/css/theme-relearn-light.css.\nIf you want to make changes to a shipped color variant, create a copy in your site’s static/css directory. Don’t edit the file in the theme’s directory!\nMultiple Variants You can also set multiple variants. In this case, the first variant is the default chosen on first view and a variant selector will be shown in the menu footer if the array contains more than one entry.\n[params] themeVariant = [ \"relearn-light\", \"relearn-dark\" ] Tip The theme provides an advanced configuration mode, combining the functionality for multiple variants with the below possibilities of adjusting to your OS settings, logo and syntax highlightning and even more!\nAlthough all options documented here are still working, the advanced configuration options are the recommended way to configure your color variants. See below.\nAdjust to OS Settings You can also cause the site to adjust to your OS settings for light/dark mode. Just set the themeVariant to auto. That’s it.\nYou can use the auto value with the single or multiple variants option. If you are using multiple variants, you can drop auto at any position in the option’s array, but usually it makes sense to set it in the first position and make it the default.\n[params] themeVariant = [ \"auto\", \"red\" ]If you don’t configure anything else, the theme will default to use relearn-light for light mode and relearn-dark for dark mode. These defaults are overwritten by the first two non-auto options of your themeVariant option if present.\nIn the above example, you would end with red for light mode and the default of relearn-dark for dark mode.\nIf you don’t like that behavior, you can explicitly set themeVariantAuto. The first entry in the array is the color variant for light mode, the second for dark mode.\n[params] themeVariantAuto = [ \"learn\", \"neon\" ]Change the Favicon If your favicon is a SVG, PNG or ICO, just drop your image in your site’s static/images/ directory and name it favicon.svg, favicon.png or favicon.ico respectively.\nIf you want to adjust your favicon according to your OS settings for light/dark mode, add the image files static/images/favicon-light.svg and static/images/favicon-dark.svg to your site’s directory, respectively, corresponding to your file format. In case some of the files are missing, the theme falls back to favicon.svg for each missing file. All supplied favicons must be of the same file format.\nIf no favicon file is found, the theme will lookup the alternative filename logo in the same location and will repeat the search for the list of supported file types.\nIf you need to change this default behavior, create a new file layouts/partials/favicon.html in your site’s directory and write something like this:\n\u003clink rel=\"icon\" href=\"/images/favicon.bmp\" type=\"image/bmp\"\u003eChange the Logo Create a new file in layouts/partials/logo.html of your site. Then write any HTML you want. You could use an img HTML tag and reference an image created under the static folder, or you could paste a SVG definition!\nNote The size of the logo will adapt automatically.\nSyntax highlightning If you want to switch the syntax highlighting theme together with your color variant, generate a syntax highlighting stylesheet and configure your installation according to Hugo’s documentation. Then, @import the syntax highlightning stylesheet in your color variant stylesheet.\nFor an example, take a look into theme-relearn-light.css and config.toml of the exampleSite.\nIf you want to reconfigure just the syntax highlighting of an existing color variant, you need to copy the file to your site’s directory and adjust it accordingly.\nChange the Variant (Advanced) The theme offers a new way to configure theme variants and all of the aspects above inside of a single configuration item. This comes with some features previously unsupported.\nLike with the multiple variants option, you are defining your theme variants in an array but now not by simple strings but in a table with suboptions.\nAgain, in this case, the first variant is the default chosen on first view and a variant selector will be shown in the menu footer if the array contains more than one entry.\n[params] themeVariant = [ \"relearn-light\", \"relearn-dark\" ]you now write it that way:\n[params] [[params.themeVariant]] identifier = \"relearn-light\" [[params.themeVariant]] identifier = \"relearn-dark\"The identifier option is mandatory and equivalent to the string in the first example. Further options can be configured, see the table below.\nParameter Name Default Notes identifier \u003cempty\u003e Must correspond to the name of a color variant either in your site’s or the theme’s directory in the form static/css/theme-\u003cIDENTIFIER\u003e.css. name see notes The name to be displayed in the variant selector. If not set, the identifier is used in a human readable form. ",
+    "content": "The Relearn theme provides configuration options to change your your site’s colors, favicon and logo. This allows you to easily align your site visuals to your desired style. Most of these options are exposed thru so called color variants.\nA color variant lets you customize various visual effects of your site like almost any color, used fonts, color schemes of print, syntax highligtning, Mermaid and the OpenAPI shortcode, etc. It contains of a CSS file and optional configuration options in your config.toml.\nThe Relearn theme ships with a wide set of different color variants. You can use them as-is, copy them over and use them as a starting point for your customizations or just create completely new variants unique to your site. The interactive variant generator may help you with this task.\nOnce configured in your config.toml, you can select them with the variant selector at the bottom of the menu.\nChange the Variant (Simple) Single Variant Set the themeVariant value to the name of your theme file. That’s it! Your site will be displayed in this variant only.\n[params] themeVariant = \"relearn-light\" Note Your theme variant file must reside in your site’s static/css directory or in the theme’s static/css directory and the file name must start with theme- and end wit .css. In the above example, the path of your theme file must be static/css/theme-relearn-light.css.\nIf you want to make changes to a shipped color variant, create a copy in your site’s static/css directory. Don’t edit the file in the theme’s directory!\nMultiple Variants You can also set multiple variants. In this case, the first variant is the default chosen on first view and a variant selector will be shown in the menu footer if the array contains more than one entry.\n[params] themeVariant = [ \"relearn-light\", \"relearn-dark\" ] Tip The theme provides an advanced configuration mode, combining the functionality for multiple variants with the below possibilities of adjusting to your OS settings, logo and syntax highlightning and even more!\nAlthough all options documented here are still working, the advanced configuration options are the recommended way to configure your color variants. See below.\nAdjust to OS Settings You can also cause the site to adjust to your OS settings for light/dark mode. Just set the themeVariant to auto to become an auto mode variant. That’s it.\nYou can use the auto value with the single or multiple variants option. If you are using multiple variants, you can drop auto at any position in the option’s array, but usually it makes sense to set it in the first position and make it the default.\n[params] themeVariant = [ \"auto\", \"red\" ]If you don’t configure anything else, the theme will default to use relearn-light for light mode and relearn-dark for dark mode. These defaults are overwritten by the first two non-auto options of your themeVariant option if present.\nIn the above example, you would end with red for light mode and the default of relearn-dark for dark mode.\nIf you don’t like that behavior, you can explicitly set themeVariantAuto. The first entry in the array is the color variant for light mode, the second for dark mode.\n[params] themeVariantAuto = [ \"learn\", \"neon\" ]Change the Favicon If your favicon is a SVG, PNG or ICO, just drop your image in your site’s static/images/ directory and name it favicon.svg, favicon.png or favicon.ico respectively.\nIf you want to adjust your favicon according to your OS settings for light/dark mode, add the image files static/images/favicon-light.svg and static/images/favicon-dark.svg to your site’s directory, respectively, corresponding to your file format. In case some of the files are missing, the theme falls back to favicon.svg for each missing file. All supplied favicons must be of the same file format.\nIf no favicon file is found, the theme will lookup the alternative filename logo in the same location and will repeat the search for the list of supported file types.\nIf you need to change this default behavior, create a new file layouts/partials/favicon.html in your site’s directory and write something like this:\n\u003clink rel=\"icon\" href=\"/images/favicon.bmp\" type=\"image/bmp\"\u003eChange the Logo Create a new file in layouts/partials/logo.html of your site. Then write any HTML you want. You could use an img HTML tag and reference an image created under the static folder, or you could paste a SVG definition!\nNote The size of the logo will adapt automatically.\nSyntax highlightning If you want to switch the syntax highlighting theme together with your color variant, generate a syntax highlighting stylesheet and configure your installation according to Hugo’s documentation. Then, @import the syntax highlightning stylesheet in your color variant stylesheet.\nFor an example, take a look into theme-relearn-light.css and config.toml of the exampleSite.\nIf you want to reconfigure just the syntax highlighting of an existing color variant, you need to copy the file to your site’s directory and adjust it accordingly.\nChange the Variant (Advanced) The theme offers a new way to configure theme variants and all of the aspects above inside of a single configuration item. This comes with some features previously unsupported.\nLike with the multiple variants option, you are defining your theme variants in an array but now not by simple strings but in a table with suboptions.\nAgain, in this case, the first variant is the default chosen on first view and a variant selector will be shown in the menu footer if the array contains more than one entry.\n[params] themeVariant = [ \"relearn-light\", \"relearn-dark\" ]you now write it that way:\n[params] [[params.themeVariant]] identifier = \"relearn-light\" [[params.themeVariant]] identifier = \"relearn-dark\"The identifier option is mandatory and equivalent to the string in the first example. Further options can be configured, see the table below.\nParameter Name Default Notes identifier \u003cempty\u003e Must correspond to the name of a color variant either in your site’s or the theme’s directory in the form static/css/theme-\u003cIDENTIFIER\u003e.css. name see notes The name to be displayed in the variant selector. If not set, the identifier is used in a human readable form. auto \u003cempty\u003e If set, the variant is treated as an auto mode variant. It has the same behavior as the themeVariantAuto option. The first entry in the array is the color variant for light mode, the second for dark mode. Defining auto mode variants with the advanced options has the benefit that you can now have multiple auto mode variants instead of just one with the simple options. Example Configuration of This Site [params] [[params.themeVariant]] identifier = \"relearn-auto\" name = \"Relearn Light/Dark\" auto = [] [[params.themeVariant]] identifier = \"relearn-light\" [[params.themeVariant]] identifier = \"relearn-dark\" [[params.themeVariant]] identifier = \"zen-auto\" name = \"Zen Light/Dark\" auto = [ \"zen-light\", \"zen-dark\" ] [[params.themeVariant]] identifier = \"zen-light\" [[params.themeVariant]] identifier = \"zen-dark\" [[params.themeVariant]] identifier = \"neon\"",
     "description": "",
     "tags": null,
     "title": "Branding",
diff --git a/more/credits/index.html b/more/credits/index.html
index 6a8eba6e39..e71d316eb7 100644
--- a/more/credits/index.html
+++ b/more/credits/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/more/credits/index.html" rel="alternate" hreflang="pir">
     <link href="../../more/credits/index.xml" rel="alternate" type="application/rss+xml" title="Credits :: Hugo Relearn Theme">
     <link href="../../more/credits/index.print.html" rel="alternate" type="text/html" title="Credits :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -284,12 +284,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -379,9 +379,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -446,13 +448,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/more/credits/index.print.html b/more/credits/index.print.html
index cf356d2ce0..71e9b79908 100644
--- a/more/credits/index.print.html
+++ b/more/credits/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/more/credits/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/more/credits/index.html" rel="canonical" type="text/html" title="Credits :: Hugo Relearn Theme">
     <link href="../../more/credits/index.xml" rel="alternate" type="application/rss+xml" title="Credits :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -156,8 +156,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/pir/404.html b/pir/404.html
index 270b367b7e..dcb0ca164c 100644
--- a/pir/404.html
+++ b/pir/404.html
@@ -19,20 +19,20 @@
     <meta property="og:site_name" content="Cap&#39;n Hugo Relearrrn Theme">
     <title>404 Page not found :: Cap&#39;n Hugo Relearrrn Theme</title>
     <base href="https://McShelby.github.io/hugo-theme-relearn/">
-    <link href="../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../js/url.js?1700525733"></script>
-    <script src="../js/variant.js?1700525733"></script>
+    <link href="../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../js/url.js?1700697952"></script>
+    <script src="../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -42,7 +42,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
diff --git a/pir/basics/branding/index.html b/pir/basics/branding/index.html
index ca073f1ad7..69eccd4288 100644
--- a/pir/basics/branding/index.html
+++ b/pir/basics/branding/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/branding/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/basics/branding/index.xml" rel="alternate" type="application/rss+xml" title="Brrrand&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/branding/index.print.html" rel="alternate" type="text/html" title="Brrrand&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -96,6 +96,7 @@
     <li><a href="#theme-variant-advanced">Change th' Variant (Advanced)</a>
       <ul>
         <li><a href="#parameter">Parameter</a></li>
+        <li><a href="#example-configuration-of-this-site">Example Configurat'n o' This Ship</a></li>
       </ul>
     </li>
   </ul>
@@ -182,7 +183,7 @@
 </div>
 </div>
 <h2 id="adjust-to-os-settings">Adjust t' OS Sett'ns</h2>
-<p>Ye can also cause th' ship t' adjust t' yer OS sett'ns fer light/dark mode. Just set th' <code>themeVariant</code> t' <code>auto</code>. That&rsquo;s it.</p>
+<p>Ye can also cause th' ship t' adjust t' yer OS sett'ns fer light/dark mode. Just set th' <code>themeVariant</code> t' <code>auto</code> t' become an auto mode variant. That&rsquo;s it.</p>
 <p>Ye can use th' <code>auto</code> value wit' th' single or multiple variants opt'n. If ye be us'n multiple variants, ye can drop <code>auto</code> at any posit'n 'n th' option&rsquo;s array, but usually it makes sense t' set it 'n th' first posit'n an' make it th' default.</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">themeVariant</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;auto&#34;</span><span class="p">,</span> <span class="s2">&#34;red&#34;</span> <span class="p">]</span></span></span></code></pre></div><p>If ye don&rsquo;t configure anyth'n else, th' theme will default t' use <code>relearn-light</code> fer light mode an' <code>relearn-dark</code> fer dark mode. These defaults be overwritten by th' first two non-auto opt'ns o' yer <code>themeVariant</code> opt'n if present.</p>
@@ -239,9 +240,33 @@
 <td>see notes</td>
 <td>Th' name t' be displayed 'n th' variant selector. If not set, th' identifier be used 'n a human read'ble form.</td>
 </tr>
+<tr>
+<td>auto</td>
+<td><em>&lt;empty&gt;</em></td>
+<td>If set, th' variant be treated as an <a href="#adjust-to-os-settings">auto mode variant</a>. It has th' same behavior as th' <code>themeVariantAuto</code> opt'n. Th' first entry 'n th' array be th' color variant fer light mode, th' second fer dark mode. Defin'n auto mode variants wit' th' advanced opt'ns has th' benefit that ye can now have multiple auto mode variants instead o' just one wit' th' simple opt'ns.</td>
+</tr>
 </tbody>
 </table>
-
+<h3 id="example-configuration-of-this-site">Example Configurat'n o' This Ship</h3>
+<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-auto&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Relearn Light/Dark&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">auto</span> <span class="p">=</span> <span class="p">[]</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-auto&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Zen Light/Dark&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">auto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;zen-light&#34;</span><span class="p">,</span> <span class="s2">&#34;zen-dark&#34;</span> <span class="p">]</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-light&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-dark&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;neon&#34;</span></span></span></code></pre></div>
 
             <footer class="footline">
 <div class=" taxonomy-categories term-list cstyle  " title="Categories" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
@@ -338,12 +363,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../../js/search.js?1700525734" defer></script>
+        <script src="../../../js/auto-complete.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697953" defer></script>
+        <script src="../../../js/search.js?1700697953" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -433,9 +458,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -500,13 +527,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../../js/github-buttons.js?1700697953"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../../../js/theme.js?1700525734" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697953" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697953" defer></script>
+    <script src="../../../js/theme.js?1700697953" defer></script>
   </body>
 </html>
diff --git a/pir/basics/branding/index.print.html b/pir/basics/branding/index.print.html
index 69f6bcc33b..8270be7473 100644
--- a/pir/basics/branding/index.print.html
+++ b/pir/basics/branding/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/branding/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/branding/index.html" rel="canonical" type="text/html" title="Brrrand&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/branding/index.xml" rel="alternate" type="application/rss+xml" title="Brrrand&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -124,7 +124,7 @@
 </div>
 </div>
 <h2 id="adjust-to-os-settings">Adjust t' OS Sett'ns</h2>
-<p>Ye can also cause th' ship t' adjust t' yer OS sett'ns fer light/dark mode. Just set th' <code>themeVariant</code> t' <code>auto</code>. That&rsquo;s it.</p>
+<p>Ye can also cause th' ship t' adjust t' yer OS sett'ns fer light/dark mode. Just set th' <code>themeVariant</code> t' <code>auto</code> t' become an auto mode variant. That&rsquo;s it.</p>
 <p>Ye can use th' <code>auto</code> value wit' th' single or multiple variants opt'n. If ye be us'n multiple variants, ye can drop <code>auto</code> at any posit'n 'n th' option&rsquo;s array, but usually it makes sense t' set it 'n th' first posit'n an' make it th' default.</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">themeVariant</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;auto&#34;</span><span class="p">,</span> <span class="s2">&#34;red&#34;</span> <span class="p">]</span></span></span></code></pre></div><p>If ye don&rsquo;t configure anyth'n else, th' theme will default t' use <code>relearn-light</code> fer light mode an' <code>relearn-dark</code> fer dark mode. These defaults be overwritten by th' first two non-auto opt'ns o' yer <code>themeVariant</code> opt'n if present.</p>
@@ -181,9 +181,33 @@
 <td>see notes</td>
 <td>Th' name t' be displayed 'n th' variant selector. If not set, th' identifier be used 'n a human read'ble form.</td>
 </tr>
+<tr>
+<td>auto</td>
+<td><em>&lt;empty&gt;</em></td>
+<td>If set, th' variant be treated as an <a href="#adjust-to-os-settings">auto mode variant</a>. It has th' same behavior as th' <code>themeVariantAuto</code> opt'n. Th' first entry 'n th' array be th' color variant fer light mode, th' second fer dark mode. Defin'n auto mode variants wit' th' advanced opt'ns has th' benefit that ye can now have multiple auto mode variants instead o' just one wit' th' simple opt'ns.</td>
+</tr>
 </tbody>
 </table>
-
+<h3 id="example-configuration-of-this-site">Example Configurat'n o' This Ship</h3>
+<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-auto&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Relearn Light/Dark&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">auto</span> <span class="p">=</span> <span class="p">[]</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-auto&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Zen Light/Dark&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">auto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;zen-light&#34;</span><span class="p">,</span> <span class="s2">&#34;zen-dark&#34;</span> <span class="p">]</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-light&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-dark&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;neon&#34;</span></span></span></code></pre></div>
 
             <footer class="footline">
 <div class=" taxonomy-categories term-list cstyle  " title="Categories" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
@@ -199,8 +223,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/basics/configuration/index.html b/pir/basics/configuration/index.html
index e0284c0609..b4272d7ea2 100644
--- a/pir/basics/configuration/index.html
+++ b/pir/basics/configuration/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/configuration/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/basics/configuration/index.xml" rel="alternate" type="application/rss+xml" title="Configurrrat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/configuration/index.print.html" rel="alternate" type="text/html" title="Configurrrat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -142,13 +142,13 @@
 <p>Avast that some o' these opt'ns be explained 'n detail 'n other sections o' this documentat'n.</p>
 
   
-<div class="tab-panel" data-tab-group="3af05215a9c9c79b60a95735d81c4236">
+<div class="tab-panel" data-tab-group="33288630c8becb79f345305399fd8fa9">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('3af05215a9c9c79b60a95735d81c4236','configtoml')"
+      onclick="switchTab('33288630c8becb79f345305399fd8fa9','configtoml')"
     >
       <span class="tab-nav-text">config.toml</span>
     </button>
@@ -223,26 +223,20 @@
 </span></span><span class="line"><span class="cl"><span class="c"># Ye can also define yer own variants. See th' docs how this works. Also,</span>
 </span></span><span class="line"><span class="cl"><span class="c"># th' docs provide an interactive theme generator t' help ye wit' this task.</span>
 </span></span><span class="line"><span class="cl"><span class="nx">themeVariant</span> <span class="p">=</span> <span class="p">[</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;auto&#34;</span>          <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span> <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>  <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-light&#34;</span>     <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-dark&#34;</span>      <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;neon&#34;</span>          <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;learn&#34;</span>         <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;blue&#34;</span>          <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;green&#34;</span>         <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;red&#34;</span>           <span class="p">}</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-auto&#34;</span><span class="p">,</span>  <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Relearn Light/Dark&#34;</span><span class="p">,</span> <span class="nx">auto</span> <span class="p">=</span> <span class="p">[]</span> <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span>  <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>   <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-bright&#34;</span> <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-auto&#34;</span><span class="p">,</span>      <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Zen Light/Dark&#34;</span><span class="p">,</span> <span class="nx">auto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;zen-light&#34;</span><span class="p">,</span> <span class="s2">&#34;zen-dark&#34;</span> <span class="p">]</span> <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-light&#34;</span>      <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-dark&#34;</span>       <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;neon&#34;</span>           <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;learn&#34;</span>          <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;blue&#34;</span>           <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;green&#34;</span>          <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;red&#34;</span>            <span class="p">}</span>
 </span></span><span class="line"><span class="cl"><span class="p">]</span>
 </span></span><span class="line"><span class="cl">
-</span></span><span class="line"><span class="cl"><span class="c"># Th' color variants used fer auto mode.</span>
-</span></span><span class="line"><span class="cl"><span class="c"># Default: [ &#34;relearn-light&#34;, &#34;relearn-dark&#34; ], overwritten by th' first</span>
-</span></span><span class="line"><span class="cl"><span class="c"># two non-auto opt'ns o' yer `themeVariant` opt'n if present.</span>
-</span></span><span class="line"><span class="cl"><span class="c"># Th' auto variant defines how yer ship adjusts t' yer selected OS sett'ns</span>
-</span></span><span class="line"><span class="cl"><span class="c"># fer light/dark mode. Th' first array element be th' variant fer light mode,</span>
-</span></span><span class="line"><span class="cl"><span class="c"># th' second fer dark mode.</span>
-</span></span><span class="line"><span class="cl"><span class="nx">themeVariantAuto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;relearn-light&#34;</span><span class="p">,</span> <span class="s2">&#34;relearn-dark&#34;</span> <span class="p">]</span>
-</span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl"><span class="c">#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span>
 </span></span><span class="line"><span class="cl"><span class="c"># General</span>
 </span></span><span class="line"><span class="cl"><span class="c"># These opt'ns be defin'n general, non visual behavior.</span>
@@ -673,12 +667,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../../js/search.js?1700525734" defer></script>
+        <script src="../../../js/auto-complete.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697953" defer></script>
+        <script src="../../../js/search.js?1700697953" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -768,9 +762,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -835,13 +831,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../../js/github-buttons.js?1700697953"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../../../js/theme.js?1700525734" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697953" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697953" defer></script>
+    <script src="../../../js/theme.js?1700697953" defer></script>
   </body>
 </html>
diff --git a/pir/basics/configuration/index.print.html b/pir/basics/configuration/index.print.html
index b41e1152db..4ea6af92d5 100644
--- a/pir/basics/configuration/index.print.html
+++ b/pir/basics/configuration/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/configuration/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/configuration/index.html" rel="canonical" type="text/html" title="Configurrrat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/configuration/index.xml" rel="alternate" type="application/rss+xml" title="Configurrrat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -103,13 +103,13 @@
 <p>Avast that some o' these opt'ns be explained 'n detail 'n other sections o' this documentat'n.</p>
 
   
-<div class="tab-panel" data-tab-group="3af05215a9c9c79b60a95735d81c4236">
+<div class="tab-panel" data-tab-group="33288630c8becb79f345305399fd8fa9">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('3af05215a9c9c79b60a95735d81c4236','configtoml')"
+      onclick="switchTab('33288630c8becb79f345305399fd8fa9','configtoml')"
     >
       <span class="tab-nav-text">config.toml</span>
     </button>
@@ -184,26 +184,20 @@
 </span></span><span class="line"><span class="cl"><span class="c"># Ye can also define yer own variants. See th' docs how this works. Also,</span>
 </span></span><span class="line"><span class="cl"><span class="c"># th' docs provide an interactive theme generator t' help ye wit' this task.</span>
 </span></span><span class="line"><span class="cl"><span class="nx">themeVariant</span> <span class="p">=</span> <span class="p">[</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;auto&#34;</span>          <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span> <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>  <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-light&#34;</span>     <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-dark&#34;</span>      <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;neon&#34;</span>          <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;learn&#34;</span>         <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;blue&#34;</span>          <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;green&#34;</span>         <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;red&#34;</span>           <span class="p">}</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-auto&#34;</span><span class="p">,</span>  <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Relearn Light/Dark&#34;</span><span class="p">,</span> <span class="nx">auto</span> <span class="p">=</span> <span class="p">[]</span> <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span>  <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>   <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-bright&#34;</span> <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-auto&#34;</span><span class="p">,</span>      <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Zen Light/Dark&#34;</span><span class="p">,</span> <span class="nx">auto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;zen-light&#34;</span><span class="p">,</span> <span class="s2">&#34;zen-dark&#34;</span> <span class="p">]</span> <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-light&#34;</span>      <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-dark&#34;</span>       <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;neon&#34;</span>           <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;learn&#34;</span>          <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;blue&#34;</span>           <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;green&#34;</span>          <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;red&#34;</span>            <span class="p">}</span>
 </span></span><span class="line"><span class="cl"><span class="p">]</span>
 </span></span><span class="line"><span class="cl">
-</span></span><span class="line"><span class="cl"><span class="c"># Th' color variants used fer auto mode.</span>
-</span></span><span class="line"><span class="cl"><span class="c"># Default: [ &#34;relearn-light&#34;, &#34;relearn-dark&#34; ], overwritten by th' first</span>
-</span></span><span class="line"><span class="cl"><span class="c"># two non-auto opt'ns o' yer `themeVariant` opt'n if present.</span>
-</span></span><span class="line"><span class="cl"><span class="c"># Th' auto variant defines how yer ship adjusts t' yer selected OS sett'ns</span>
-</span></span><span class="line"><span class="cl"><span class="c"># fer light/dark mode. Th' first array element be th' variant fer light mode,</span>
-</span></span><span class="line"><span class="cl"><span class="c"># th' second fer dark mode.</span>
-</span></span><span class="line"><span class="cl"><span class="nx">themeVariantAuto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;relearn-light&#34;</span><span class="p">,</span> <span class="s2">&#34;relearn-dark&#34;</span> <span class="p">]</span>
-</span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl"><span class="c">#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span>
 </span></span><span class="line"><span class="cl"><span class="c"># General</span>
 </span></span><span class="line"><span class="cl"><span class="c"># These opt'ns be defin'n general, non visual behavior.</span>
@@ -553,8 +547,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/basics/customization/index.html b/pir/basics/customization/index.html
index 7c379a787d..75e2e478de 100644
--- a/pir/basics/customization/index.html
+++ b/pir/basics/customization/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/customization/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/basics/customization/index.xml" rel="alternate" type="application/rss+xml" title="Customizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/customization/index.print.html" rel="alternate" type="text/html" title="Customizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -177,8 +177,8 @@
 <p>Ye can add a dedicated search plank fer yer plank by add'n th' <code>SEARCHPAGE</code> outputformat t' yer home plank by add'n th' follow'n lines 'n yer <code>config.toml</code> file. This will cause Cap'n Hugo t' generate a new file <code>http://example.com/mysite/search.html</code>.</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">home</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;HTML&#34;</span><span class="p">,</span> <span class="s2">&#34;RSS&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCH&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCHPAGE&#34;</span><span class="p">]</span></span></span></code></pre></div><p>Ye can access this plank by either click'n on th' magnifier glass or by typ'n some search term an' press'n <code>ENTER</code> inside o' th' menu&rsquo;s search box .</p>
-<p><a href="#R-image-a63d9f35792d51f3fe00646ffd943ccb" class="lightbox-link"><img src="../../../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-a63d9f35792d51f3fe00646ffd943ccb"><img src="../../../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-c0f4ffed1ca5905acaf2222772bc7a87" class="lightbox-link"><img src="../../../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-c0f4ffed1ca5905acaf2222772bc7a87"><img src="../../../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 <div class="box notices cstyle note">
   <div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</div>
@@ -219,8 +219,8 @@ appearance, ye will have t' configure th' <code>landingPageName</code> fer th' d
 </span></span><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Arrr! Homme&#34;</span>
 </span></span><span class="line"><span class="cl"><span class="p">...</span></span></span></code></pre></div><p>If this opt'n be not configured fer a specific language, they will get their default values:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Home&#34;</span></span></span></code></pre></div><p>Th' home button be go'n t' look like this:</p>
-<p><a href="#R-image-4c3da87119f0d91d361a565a33670b9b" class="lightbox-link"><img src="../../../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-4c3da87119f0d91d361a565a33670b9b"><img src="../../../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-450c230643e84059105dd1a85d72aa68" class="lightbox-link"><img src="../../../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-450c230643e84059105dd1a85d72aa68"><img src="../../../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="social-media-meta-tags">Social Media Meta Tags</h2>
 <p>Ye can add social media meta tags fer th' <a href="https://gohugo.io/templates/internal/#open-graph" target="_blank">Open Graph</a> protocol an' <a href="https://gohugo.io/templates/internal/#twitter-cards" target="_blank">Twitter Cards</a> t' yer ship. These be configured as mentioned 'n th' Cap'n Hugo docs.</p>
 <h2 id="change-the-menu-width">Change th' Menu Width</h2>
@@ -401,12 +401,12 @@ appearance, ye will have t' configure th' <code>landingPageName</code> fer th' d
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../../js/search.js?1700525734" defer></script>
+        <script src="../../../js/auto-complete.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697953" defer></script>
+        <script src="../../../js/search.js?1700697953" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -496,9 +496,11 @@ appearance, ye will have t' configure th' <code>landingPageName</code> fer th' d
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -563,13 +565,13 @@ appearance, ye will have t' configure th' <code>landingPageName</code> fer th' d
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../../js/github-buttons.js?1700697953"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../../../js/theme.js?1700525734" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697953" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697953" defer></script>
+    <script src="../../../js/theme.js?1700697953" defer></script>
   </body>
 </html>
diff --git a/pir/basics/customization/index.print.html b/pir/basics/customization/index.print.html
index 17d7c1c13a..1d613bce1c 100644
--- a/pir/basics/customization/index.print.html
+++ b/pir/basics/customization/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/customization/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/customization/index.html" rel="canonical" type="text/html" title="Customizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/customization/index.xml" rel="alternate" type="application/rss+xml" title="Customizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -119,8 +119,8 @@
 <p>Ye can add a dedicated search plank fer yer plank by add'n th' <code>SEARCHPAGE</code> outputformat t' yer home plank by add'n th' follow'n lines 'n yer <code>config.toml</code> file. This will cause Cap'n Hugo t' generate a new file <code>http://example.com/mysite/search.html</code>.</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">home</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;HTML&#34;</span><span class="p">,</span> <span class="s2">&#34;RSS&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCH&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCHPAGE&#34;</span><span class="p">]</span></span></span></code></pre></div><p>Ye can access this plank by either click'n on th' magnifier glass or by typ'n some search term an' press'n <code>ENTER</code> inside o' th' menu&rsquo;s search box .</p>
-<p><a href="#R-image-a63d9f35792d51f3fe00646ffd943ccb" class="lightbox-link"><img src="../../../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-a63d9f35792d51f3fe00646ffd943ccb"><img src="../../../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-c0f4ffed1ca5905acaf2222772bc7a87" class="lightbox-link"><img src="../../../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-c0f4ffed1ca5905acaf2222772bc7a87"><img src="../../../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 <div class="box notices cstyle note">
   <div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</div>
@@ -161,8 +161,8 @@ appearance, ye will have t' configure th' <code>landingPageName</code> fer th' d
 </span></span><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Arrr! Homme&#34;</span>
 </span></span><span class="line"><span class="cl"><span class="p">...</span></span></span></code></pre></div><p>If this opt'n be not configured fer a specific language, they will get their default values:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Home&#34;</span></span></span></code></pre></div><p>Th' home button be go'n t' look like this:</p>
-<p><a href="#R-image-4c3da87119f0d91d361a565a33670b9b" class="lightbox-link"><img src="../../../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-4c3da87119f0d91d361a565a33670b9b"><img src="../../../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-450c230643e84059105dd1a85d72aa68" class="lightbox-link"><img src="../../../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-450c230643e84059105dd1a85d72aa68"><img src="../../../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="social-media-meta-tags">Social Media Meta Tags</h2>
 <p>Ye can add social media meta tags fer th' <a href="https://gohugo.io/templates/internal/#open-graph" target="_blank">Open Graph</a> protocol an' <a href="https://gohugo.io/templates/internal/#twitter-cards" target="_blank">Twitter Cards</a> t' yer ship. These be configured as mentioned 'n th' Cap'n Hugo docs.</p>
 <h2 id="change-the-menu-width">Change th' Menu Width</h2>
@@ -262,8 +262,8 @@ appearance, ye will have t' configure th' <code>landingPageName</code> fer th' d
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/basics/generator/index.html b/pir/basics/generator/index.html
index 81609bba64..b5f4d976a2 100644
--- a/pir/basics/generator/index.html
+++ b/pir/basics/generator/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/generator/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/basics/generator/index.xml" rel="alternate" type="application/rss+xml" title="Stylesheet generrrat&#39;r :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/generator/index.print.html" rel="alternate" type="text/html" title="Stylesheet generrrat&#39;r :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -136,13 +136,13 @@
 <p>This interactive tool may help ye t' generate yer own color variant stylesheet.</p>
 
 <div class="expand">
-    <input type="checkbox" id="R-expand-52f0e07d7f9ed7db834823204655ceb7" aria-controls="R-expandcontent-52f0e07d7f9ed7db834823204655ceb7" >
-    <label class="expand-label" for="R-expand-52f0e07d7f9ed7db834823204655ceb7" >
+    <input type="checkbox" id="R-expand-46b7f1960b5d266a476b23f83989b416" aria-controls="R-expandcontent-46b7f1960b5d266a476b23f83989b416" >
+    <label class="expand-label" for="R-expand-46b7f1960b5d266a476b23f83989b416" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show usage instruct'ns
     </label>
-    <div id="R-expandcontent-52f0e07d7f9ed7db834823204655ceb7" class="expand-content">
+    <div id="R-expandcontent-46b7f1960b5d266a476b23f83989b416" class="expand-content">
 
 <p>T' get started, first select a color variant from th' variant selector 'n th' lower left sidebar that fits ye best as a start'n point.</p>
 <p>Th' graph be interactive an' reflect th' current colors. Ye can click on any o' th' colored boxes t' adjust th' respective color. Th' graph <strong>an' th' plank</strong> will update accordingly.</p>
@@ -281,12 +281,12 @@ window.variants && variants.generator( '#R-vargenerator' );
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../../js/search.js?1700525734" defer></script>
+        <script src="../../../js/auto-complete.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697953" defer></script>
+        <script src="../../../js/search.js?1700697953" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -376,9 +376,11 @@ window.variants && variants.generator( '#R-vargenerator' );
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -443,27 +445,27 @@ window.variants && variants.generator( '#R-vargenerator' );
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../../js/github-buttons.js?1700697953"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../../../js/d3/d3-color.min.js?1700525734" defer></script>
-    <script src="../../../js/d3/d3-dispatch.min.js?1700525734" defer></script>
-    <script src="../../../js/d3/d3-drag.min.js?1700525734" defer></script>
-    <script src="../../../js/d3/d3-ease.min.js?1700525734" defer></script>
-    <script src="../../../js/d3/d3-interpolate.min.js?1700525734" defer></script>
-    <script src="../../../js/d3/d3-selection.min.js?1700525734" defer></script>
-    <script src="../../../js/d3/d3-timer.min.js?1700525734" defer></script>
-    <script src="../../../js/d3/d3-transition.min.js?1700525734" defer></script>
-    <script src="../../../js/d3/d3-zoom.min.js?1700525734" defer></script>
-    <script src="../../../js/js-yaml.min.js?1700525734" defer></script>
-    <script src="../../../js/mermaid.min.js?1700525734" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697953" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697953" defer></script>
+    <script src="../../../js/d3/d3-color.min.js?1700697953" defer></script>
+    <script src="../../../js/d3/d3-dispatch.min.js?1700697953" defer></script>
+    <script src="../../../js/d3/d3-drag.min.js?1700697953" defer></script>
+    <script src="../../../js/d3/d3-ease.min.js?1700697953" defer></script>
+    <script src="../../../js/d3/d3-interpolate.min.js?1700697953" defer></script>
+    <script src="../../../js/d3/d3-selection.min.js?1700697953" defer></script>
+    <script src="../../../js/d3/d3-timer.min.js?1700697953" defer></script>
+    <script src="../../../js/d3/d3-transition.min.js?1700697953" defer></script>
+    <script src="../../../js/d3/d3-zoom.min.js?1700697953" defer></script>
+    <script src="../../../js/js-yaml.min.js?1700697953" defer></script>
+    <script src="../../../js/mermaid.min.js?1700697953" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../../js/theme.js?1700525734" defer></script>
+    <script src="../../../js/theme.js?1700697953" defer></script>
   </body>
 </html>
diff --git a/pir/basics/generator/index.print.html b/pir/basics/generator/index.print.html
index c264130676..818c153c28 100644
--- a/pir/basics/generator/index.print.html
+++ b/pir/basics/generator/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/generator/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/generator/index.html" rel="canonical" type="text/html" title="Stylesheet generrrat&#39;r :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/generator/index.xml" rel="alternate" type="application/rss+xml" title="Stylesheet generrrat&#39;r :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -97,13 +97,13 @@
 <p>This interactive tool may help ye t' generate yer own color variant stylesheet.</p>
 
 <div class="expand">
-    <input type="checkbox" id="R-expand-52f0e07d7f9ed7db834823204655ceb7" aria-controls="R-expandcontent-52f0e07d7f9ed7db834823204655ceb7" >
-    <label class="expand-label" for="R-expand-52f0e07d7f9ed7db834823204655ceb7" >
+    <input type="checkbox" id="R-expand-46b7f1960b5d266a476b23f83989b416" aria-controls="R-expandcontent-46b7f1960b5d266a476b23f83989b416" >
+    <label class="expand-label" for="R-expand-46b7f1960b5d266a476b23f83989b416" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show usage instruct'ns
     </label>
-    <div id="R-expandcontent-52f0e07d7f9ed7db834823204655ceb7" class="expand-content">
+    <div id="R-expandcontent-46b7f1960b5d266a476b23f83989b416" class="expand-content">
 
 <p>T' get started, first select a color variant from th' variant selector 'n th' lower left sidebar that fits ye best as a start'n point.</p>
 <p>Th' graph be interactive an' reflect th' current colors. Ye can click on any o' th' colored boxes t' adjust th' respective color. Th' graph <strong>an' th' plank</strong> will update accordingly.</p>
@@ -161,22 +161,22 @@ window.variants && variants.generator( '#R-vargenerator' );
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/d3/d3-color.min.js?1700525735" defer></script>
-    <script src="../../../js/d3/d3-dispatch.min.js?1700525735" defer></script>
-    <script src="../../../js/d3/d3-drag.min.js?1700525735" defer></script>
-    <script src="../../../js/d3/d3-ease.min.js?1700525735" defer></script>
-    <script src="../../../js/d3/d3-interpolate.min.js?1700525735" defer></script>
-    <script src="../../../js/d3/d3-selection.min.js?1700525735" defer></script>
-    <script src="../../../js/d3/d3-timer.min.js?1700525735" defer></script>
-    <script src="../../../js/d3/d3-transition.min.js?1700525735" defer></script>
-    <script src="../../../js/d3/d3-zoom.min.js?1700525735" defer></script>
-    <script src="../../../js/js-yaml.min.js?1700525735" defer></script>
-    <script src="../../../js/mermaid.min.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/d3/d3-color.min.js?1700697954" defer></script>
+    <script src="../../../js/d3/d3-dispatch.min.js?1700697954" defer></script>
+    <script src="../../../js/d3/d3-drag.min.js?1700697954" defer></script>
+    <script src="../../../js/d3/d3-ease.min.js?1700697954" defer></script>
+    <script src="../../../js/d3/d3-interpolate.min.js?1700697954" defer></script>
+    <script src="../../../js/d3/d3-selection.min.js?1700697954" defer></script>
+    <script src="../../../js/d3/d3-timer.min.js?1700697954" defer></script>
+    <script src="../../../js/d3/d3-transition.min.js?1700697954" defer></script>
+    <script src="../../../js/d3/d3-zoom.min.js?1700697954" defer></script>
+    <script src="../../../js/js-yaml.min.js?1700697954" defer></script>
+    <script src="../../../js/mermaid.min.js?1700697954" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/basics/history/index.html b/pir/basics/history/index.html
index a74a424837..1a9dff5509 100644
--- a/pir/basics/history/index.html
+++ b/pir/basics/history/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/history/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/basics/history/index.xml" rel="alternate" type="application/rss+xml" title="Historrry :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/history/index.print.html" rel="alternate" type="text/html" title="Historrry :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -2257,12 +2257,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../js/search.js?1700525735" defer></script>
+        <script src="../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -2352,9 +2352,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -2419,13 +2421,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/basics/history/index.print.html b/pir/basics/history/index.print.html
index a7110ef790..8d5083ed71 100644
--- a/pir/basics/history/index.print.html
+++ b/pir/basics/history/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/history/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/history/index.html" rel="canonical" type="text/html" title="Historrry :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/history/index.xml" rel="alternate" type="application/rss+xml" title="Historrry :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -1428,8 +1428,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/basics/index.html b/pir/basics/index.html
index 39ef61b67f..6ce27ad9ec 100644
--- a/pir/basics/index.html
+++ b/pir/basics/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/index.html" rel="alternate" hreflang="pir">
     <link href="../../pir/basics/index.xml" rel="alternate" type="application/rss+xml" title="Basics :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../pir/basics/index.print.html" rel="alternate" type="text/html" title="Basics :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -224,12 +224,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../js/search.js?1700525734" defer></script>
+        <script src="../../js/auto-complete.js?1700697953" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697953" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697953" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697953" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697953" defer></script>
+        <script src="../../js/search.js?1700697953" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -319,9 +319,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -386,13 +388,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../js/github-buttons.js?1700697953"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../../js/theme.js?1700525734" defer></script>
+    <script src="../../js/clipboard.min.js?1700697953" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697953" defer></script>
+    <script src="../../js/theme.js?1700697953" defer></script>
   </body>
 </html>
diff --git a/pir/basics/index.print.html b/pir/basics/index.print.html
index 4aa0c28c4b..0594c46918 100644
--- a/pir/basics/index.print.html
+++ b/pir/basics/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/index.html" rel="canonical" type="text/html" title="Basics :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../pir/basics/index.xml" rel="alternate" type="application/rss+xml" title="Basics :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../js/url.js?1700525735"></script>
-    <script src="../../js/variant.js?1700525735"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../js/url.js?1700697954"></script>
+    <script src="../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -139,8 +139,8 @@
 <p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> Th' light themes have a bit more contrast fer rrrambl'n text an' head'ns. Also th' syntaxhighlight'n was changed t' th' more colorful MonokaiLight. This br'ns th' syntaxhighlightn'n 'n sync wit' th' correspond'n dark theme variants, which be us'n Monokai.</p>
 </li>
 <li>
-<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Ye now can configure opt'ns fer every theme variant 'n yer <code>config.toml</code>. This allows fer optional <a href="../../basics/branding/index.html#theme-variant-advanced">advanced functionality</a>. Ye don&rsquo;t need t' change anyth'n as th' old configurat'n opt'ns will still work (but may generate warnings now).</p>
-<p>Th' advanced functionality allows ye t' set an explicit name fer a theme variant, set different colors (if ye be us'n monochrome SVGs) or even different ay'cons (handy if ye want t' adjust colors fer PNGs, GIFs or JPGs) an' provide an extended way t' configure th' automatic switch o' variants based on yer OS sett'ns.</p>
+<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Ye now can configure additional opt'ns fer every theme variant 'n yer <code>config.toml</code>. This allows fer optional <a href="../../basics/branding/index.html#theme-variant-advanced">advanced functionality</a>. Ye don&rsquo;t need t' change anyth'n as th' old configurat'n opt'ns will still work (but may generate warnings now).</p>
+<p>Th' advanced functionality allows ye t' set an explicit name fer a theme variant, set different colors (if ye be us'n monochrome SVGs) or even different ay'cons (handy if ye want t' adjust colors fer PNGs, GIFs or JPGs) an' now allows fer multiple auto mode variants that adjust t' th' light/dark preference o' yer OS sett'ns.</p>
 </li>
 </ul>
 <hr>
@@ -996,8 +996,8 @@
 
 <p>Thanks t' th' simplicity o' Cap'n Hugo, this plank be as empty as this theme needs requirements.</p>
 <p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> o' th' <a href="https://gohugo.io/getting-started/installing/" target="_blank">Cap'n Hugo binary</a> fer yer OS (Windows, Linux, Mac).</p>
-<p><a href="#R-image-d045e1efc57f3d3fc2ba65bc67017199" class="lightbox-link"><img src="../../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-d045e1efc57f3d3fc2ba65bc67017199"><img src="../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f628a90f295b9755e3a248b64e27c509" class="lightbox-link"><img src="../../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f628a90f295b9755e3a248b64e27c509"><img src="../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 
             <footer class="footline">
@@ -1047,8 +1047,8 @@
 </span></span><span class="line"><span class="cl"><span class="gh"># Basics
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>
 </span></span><span class="line"><span class="cl">Discover what this Cap'n Hugo theme be all about an' th' core concepts behind it.</span></span></code></pre></div><p>renders as</p>
-<p><a href="#R-image-9d70debd2d9b8800223541c02866e0a7" class="lightbox-link"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-9d70debd2d9b8800223541c02866e0a7"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f74b3dba6c5b87761c9cc8bbc462deb4" class="lightbox-link"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f74b3dba6c5b87761c9cc8bbc462deb4"><img src="../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>Th' Relearrrn theme provides archetypes t' create skeletons fer yer website. Begin by creat'n yer first chapter plank wit' th' follow'n command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter basics/_index.md</span></span></code></pre></div><p>By open'n th' given file, ye should see th' property <code>chapter=true</code> on top, mean'n this plank be a <em>chapter</em>.</p>
 <p>By default all chapters an' planks be created as a draft. If ye want t' render these planks, remove th' property <code>draft: true</code> from th' metadata.</p>
@@ -1097,13 +1097,13 @@
 <p>Avast that some o' these opt'ns be explained 'n detail 'n other sections o' this documentat'n.</p>
 
   
-<div class="tab-panel" data-tab-group="3af05215a9c9c79b60a95735d81c4236">
+<div class="tab-panel" data-tab-group="33288630c8becb79f345305399fd8fa9">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('3af05215a9c9c79b60a95735d81c4236','configtoml')"
+      onclick="switchTab('33288630c8becb79f345305399fd8fa9','configtoml')"
     >
       <span class="tab-nav-text">config.toml</span>
     </button>
@@ -1178,26 +1178,20 @@
 </span></span><span class="line"><span class="cl"><span class="c"># Ye can also define yer own variants. See th' docs how this works. Also,</span>
 </span></span><span class="line"><span class="cl"><span class="c"># th' docs provide an interactive theme generator t' help ye wit' this task.</span>
 </span></span><span class="line"><span class="cl"><span class="nx">themeVariant</span> <span class="p">=</span> <span class="p">[</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;auto&#34;</span>          <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span> <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>  <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-light&#34;</span>     <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-dark&#34;</span>      <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;neon&#34;</span>          <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;learn&#34;</span>         <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;blue&#34;</span>          <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;green&#34;</span>         <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;red&#34;</span>           <span class="p">}</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-auto&#34;</span><span class="p">,</span>  <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Relearn Light/Dark&#34;</span><span class="p">,</span> <span class="nx">auto</span> <span class="p">=</span> <span class="p">[]</span> <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span>  <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>   <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-bright&#34;</span> <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-auto&#34;</span><span class="p">,</span>      <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Zen Light/Dark&#34;</span><span class="p">,</span> <span class="nx">auto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;zen-light&#34;</span><span class="p">,</span> <span class="s2">&#34;zen-dark&#34;</span> <span class="p">]</span> <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-light&#34;</span>      <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-dark&#34;</span>       <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;neon&#34;</span>           <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;learn&#34;</span>          <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;blue&#34;</span>           <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;green&#34;</span>          <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;red&#34;</span>            <span class="p">}</span>
 </span></span><span class="line"><span class="cl"><span class="p">]</span>
 </span></span><span class="line"><span class="cl">
-</span></span><span class="line"><span class="cl"><span class="c"># Th' color variants used fer auto mode.</span>
-</span></span><span class="line"><span class="cl"><span class="c"># Default: [ &#34;relearn-light&#34;, &#34;relearn-dark&#34; ], overwritten by th' first</span>
-</span></span><span class="line"><span class="cl"><span class="c"># two non-auto opt'ns o' yer `themeVariant` opt'n if present.</span>
-</span></span><span class="line"><span class="cl"><span class="c"># Th' auto variant defines how yer ship adjusts t' yer selected OS sett'ns</span>
-</span></span><span class="line"><span class="cl"><span class="c"># fer light/dark mode. Th' first array element be th' variant fer light mode,</span>
-</span></span><span class="line"><span class="cl"><span class="c"># th' second fer dark mode.</span>
-</span></span><span class="line"><span class="cl"><span class="nx">themeVariantAuto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;relearn-light&#34;</span><span class="p">,</span> <span class="s2">&#34;relearn-dark&#34;</span> <span class="p">]</span>
-</span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl"><span class="c">#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span>
 </span></span><span class="line"><span class="cl"><span class="c"># General</span>
 </span></span><span class="line"><span class="cl"><span class="c"># These opt'ns be defin'n general, non visual behavior.</span>
@@ -1580,7 +1574,7 @@
 </div>
 </div>
 <h2 id="adjust-to-os-settings">Adjust t' OS Sett'ns</h2>
-<p>Ye can also cause th' ship t' adjust t' yer OS sett'ns fer light/dark mode. Just set th' <code>themeVariant</code> t' <code>auto</code>. That&rsquo;s it.</p>
+<p>Ye can also cause th' ship t' adjust t' yer OS sett'ns fer light/dark mode. Just set th' <code>themeVariant</code> t' <code>auto</code> t' become an auto mode variant. That&rsquo;s it.</p>
 <p>Ye can use th' <code>auto</code> value wit' th' single or multiple variants opt'n. If ye be us'n multiple variants, ye can drop <code>auto</code> at any posit'n 'n th' option&rsquo;s array, but usually it makes sense t' set it 'n th' first posit'n an' make it th' default.</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">themeVariant</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;auto&#34;</span><span class="p">,</span> <span class="s2">&#34;red&#34;</span> <span class="p">]</span></span></span></code></pre></div><p>If ye don&rsquo;t configure anyth'n else, th' theme will default t' use <code>relearn-light</code> fer light mode an' <code>relearn-dark</code> fer dark mode. These defaults be overwritten by th' first two non-auto opt'ns o' yer <code>themeVariant</code> opt'n if present.</p>
@@ -1637,9 +1631,33 @@
 <td>see notes</td>
 <td>Th' name t' be displayed 'n th' variant selector. If not set, th' identifier be used 'n a human read'ble form.</td>
 </tr>
+<tr>
+<td>auto</td>
+<td><em>&lt;empty&gt;</em></td>
+<td>If set, th' variant be treated as an <a href="#adjust-to-os-settings">auto mode variant</a>. It has th' same behavior as th' <code>themeVariantAuto</code> opt'n. Th' first entry 'n th' array be th' color variant fer light mode, th' second fer dark mode. Defin'n auto mode variants wit' th' advanced opt'ns has th' benefit that ye can now have multiple auto mode variants instead o' just one wit' th' simple opt'ns.</td>
+</tr>
 </tbody>
 </table>
-
+<h3 id="example-configuration-of-this-site">Example Configurat'n o' This Ship</h3>
+<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-auto&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Relearn Light/Dark&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">auto</span> <span class="p">=</span> <span class="p">[]</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-auto&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Zen Light/Dark&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">auto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;zen-light&#34;</span><span class="p">,</span> <span class="s2">&#34;zen-dark&#34;</span> <span class="p">]</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-light&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-dark&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;neon&#34;</span></span></span></code></pre></div>
 
             <footer class="footline">
 <div class=" taxonomy-categories term-list cstyle  " title="Categories" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
@@ -1683,8 +1701,8 @@
 <p>Ye can add a dedicated search plank fer yer plank by add'n th' <code>SEARCHPAGE</code> outputformat t' yer home plank by add'n th' follow'n lines 'n yer <code>config.toml</code> file. This will cause Cap'n Hugo t' generate a new file <code>http://example.com/mysite/search.html</code>.</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">home</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;HTML&#34;</span><span class="p">,</span> <span class="s2">&#34;RSS&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCH&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCHPAGE&#34;</span><span class="p">]</span></span></span></code></pre></div><p>Ye can access this plank by either click'n on th' magnifier glass or by typ'n some search term an' press'n <code>ENTER</code> inside o' th' menu&rsquo;s search box .</p>
-<p><a href="#R-image-a63d9f35792d51f3fe00646ffd943ccb" class="lightbox-link"><img src="../../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-a63d9f35792d51f3fe00646ffd943ccb"><img src="../../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-c0f4ffed1ca5905acaf2222772bc7a87" class="lightbox-link"><img src="../../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-c0f4ffed1ca5905acaf2222772bc7a87"><img src="../../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 <div class="box notices cstyle note">
   <div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</div>
@@ -1725,8 +1743,8 @@ appearance, ye will have t' configure th' <code>landingPageName</code> fer th' d
 </span></span><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Arrr! Homme&#34;</span>
 </span></span><span class="line"><span class="cl"><span class="p">...</span></span></span></code></pre></div><p>If this opt'n be not configured fer a specific language, they will get their default values:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Home&#34;</span></span></span></code></pre></div><p>Th' home button be go'n t' look like this:</p>
-<p><a href="#R-image-4c3da87119f0d91d361a565a33670b9b" class="lightbox-link"><img src="../../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-4c3da87119f0d91d361a565a33670b9b"><img src="../../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-450c230643e84059105dd1a85d72aa68" class="lightbox-link"><img src="../../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-450c230643e84059105dd1a85d72aa68"><img src="../../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="social-media-meta-tags">Social Media Meta Tags</h2>
 <p>Ye can add social media meta tags fer th' <a href="https://gohugo.io/templates/internal/#open-graph" target="_blank">Open Graph</a> protocol an' <a href="https://gohugo.io/templates/internal/#twitter-cards" target="_blank">Twitter Cards</a> t' yer ship. These be configured as mentioned 'n th' Cap'n Hugo docs.</p>
 <h2 id="change-the-menu-width">Change th' Menu Width</h2>
@@ -1832,13 +1850,13 @@ appearance, ye will have t' configure th' <code>landingPageName</code> fer th' d
 <p>This interactive tool may help ye t' generate yer own color variant stylesheet.</p>
 
 <div class="expand">
-    <input type="checkbox" id="R-expand-52f0e07d7f9ed7db834823204655ceb7" aria-controls="R-expandcontent-52f0e07d7f9ed7db834823204655ceb7" >
-    <label class="expand-label" for="R-expand-52f0e07d7f9ed7db834823204655ceb7" >
+    <input type="checkbox" id="R-expand-46b7f1960b5d266a476b23f83989b416" aria-controls="R-expandcontent-46b7f1960b5d266a476b23f83989b416" >
+    <label class="expand-label" for="R-expand-46b7f1960b5d266a476b23f83989b416" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show usage instruct'ns
     </label>
-    <div id="R-expandcontent-52f0e07d7f9ed7db834823204655ceb7" class="expand-content">
+    <div id="R-expandcontent-46b7f1960b5d266a476b23f83989b416" class="expand-content">
 
 <p>T' get started, first select a color variant from th' variant selector 'n th' lower left sidebar that fits ye best as a start'n point.</p>
 <p>Th' graph be interactive an' reflect th' current colors. Ye can click on any o' th' colored boxes t' adjust th' respective color. Th' graph <strong>an' th' plank</strong> will update accordingly.</p>
@@ -1900,8 +1918,8 @@ window.variants && variants.generator( '#R-vargenerator' );
 
 
 <p>Th' theme comes wit' a reasonably configured topbar.</p>
-<p><a href="#R-image-be5110ed7098b29c554e5d4e17b81c5d" class="lightbox-link"><img src="../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-be5110ed7098b29c554e5d4e17b81c5d"><img src="../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-3bce7fccaf80d6de39267ec626cfcefe" class="lightbox-link"><img src="../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-3bce7fccaf80d6de39267ec626cfcefe"><img src="../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>Nevertheless, yer requirements may differ from this configurat'n. Luckily th' theme got ye covered as th' themebar, its buttons an' th' functionality behind these buttons be fully configur'ble by ye.</p>
 
 <div class="box notices cstyle tip">
@@ -1913,8 +1931,8 @@ window.variants && variants.generator( '#R-vargenerator' );
 </div>
 <h2 id="areas">Areas</h2>
 <p>Th' default configurat'n comes wit' three predefined areas that may contain an arbitrary set o' buttons.</p>
-<p><a href="#R-image-32288507b2090cf79d2cb98070ffc626" class="lightbox-link"><img src="../../basics/topbar/topbar-areas.png" alt="Topbar wit' default areas marked" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-32288507b2090cf79d2cb98070ffc626"><img src="../../basics/topbar/topbar-areas.png" alt="Topbar wit' default areas marked" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-607f48ec9861c60e9a220ae32a57752f" class="lightbox-link"><img src="../../basics/topbar/topbar-areas.png" alt="Topbar wit' default areas marked" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-607f48ec9861c60e9a220ae32a57752f"><img src="../../basics/topbar/topbar-areas.png" alt="Topbar wit' default areas marked" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <ul>
 <li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/start.html" target="_blank"><strong>start</strong></a>: shown between menu an' breadcrumb</li>
 <li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/end.html" target="_blank"><strong>end</strong></a>: shown on th' opposite breadcrumb side 'n comparison t' th' <em>start</em> area</li>
@@ -3571,22 +3589,22 @@ window.variants && variants.generator( '#R-vargenerator' );
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../js/d3/d3-color.min.js?1700525735" defer></script>
-    <script src="../../js/d3/d3-dispatch.min.js?1700525735" defer></script>
-    <script src="../../js/d3/d3-drag.min.js?1700525735" defer></script>
-    <script src="../../js/d3/d3-ease.min.js?1700525735" defer></script>
-    <script src="../../js/d3/d3-interpolate.min.js?1700525735" defer></script>
-    <script src="../../js/d3/d3-selection.min.js?1700525735" defer></script>
-    <script src="../../js/d3/d3-timer.min.js?1700525735" defer></script>
-    <script src="../../js/d3/d3-transition.min.js?1700525735" defer></script>
-    <script src="../../js/d3/d3-zoom.min.js?1700525735" defer></script>
-    <script src="../../js/js-yaml.min.js?1700525735" defer></script>
-    <script src="../../js/mermaid.min.js?1700525735" defer></script>
+    <script src="../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../js/d3/d3-color.min.js?1700697954" defer></script>
+    <script src="../../js/d3/d3-dispatch.min.js?1700697954" defer></script>
+    <script src="../../js/d3/d3-drag.min.js?1700697954" defer></script>
+    <script src="../../js/d3/d3-ease.min.js?1700697954" defer></script>
+    <script src="../../js/d3/d3-interpolate.min.js?1700697954" defer></script>
+    <script src="../../js/d3/d3-selection.min.js?1700697954" defer></script>
+    <script src="../../js/d3/d3-timer.min.js?1700697954" defer></script>
+    <script src="../../js/d3/d3-transition.min.js?1700697954" defer></script>
+    <script src="../../js/d3/d3-zoom.min.js?1700697954" defer></script>
+    <script src="../../js/js-yaml.min.js?1700697954" defer></script>
+    <script src="../../js/mermaid.min.js?1700697954" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../js/theme.js?1700525735" defer></script>
+    <script src="../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/basics/installation/index.html b/pir/basics/installation/index.html
index 66ba56e012..626f0ee9ba 100644
--- a/pir/basics/installation/index.html
+++ b/pir/basics/installation/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/installation/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/basics/installation/index.xml" rel="alternate" type="application/rss+xml" title="Installat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/installation/index.print.html" rel="alternate" type="text/html" title="Installat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -179,8 +179,8 @@
 </span></span><span class="line"><span class="cl"><span class="gh"># Basics
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>
 </span></span><span class="line"><span class="cl">Discover what this Cap'n Hugo theme be all about an' th' core concepts behind it.</span></span></code></pre></div><p>renders as</p>
-<p><a href="#R-image-9d70debd2d9b8800223541c02866e0a7" class="lightbox-link"><img src="../../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-9d70debd2d9b8800223541c02866e0a7"><img src="../../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f74b3dba6c5b87761c9cc8bbc462deb4" class="lightbox-link"><img src="../../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f74b3dba6c5b87761c9cc8bbc462deb4"><img src="../../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>Th' Relearrrn theme provides archetypes t' create skeletons fer yer website. Begin by creat'n yer first chapter plank wit' th' follow'n command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter basics/_index.md</span></span></code></pre></div><p>By open'n th' given file, ye should see th' property <code>chapter=true</code> on top, mean'n this plank be a <em>chapter</em>.</p>
 <p>By default all chapters an' planks be created as a draft. If ye want t' render these planks, remove th' property <code>draft: true</code> from th' metadata.</p>
@@ -298,12 +298,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../../js/search.js?1700525734" defer></script>
+        <script src="../../../js/auto-complete.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697953" defer></script>
+        <script src="../../../js/search.js?1700697953" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -393,9 +393,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -460,13 +462,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../../js/github-buttons.js?1700697953"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../../../js/theme.js?1700525734" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697953" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697953" defer></script>
+    <script src="../../../js/theme.js?1700697953" defer></script>
   </body>
 </html>
diff --git a/pir/basics/installation/index.print.html b/pir/basics/installation/index.print.html
index 847dbadfab..fc07306131 100644
--- a/pir/basics/installation/index.print.html
+++ b/pir/basics/installation/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/installation/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/installation/index.html" rel="canonical" type="text/html" title="Installat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/installation/index.xml" rel="alternate" type="application/rss+xml" title="Installat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -125,8 +125,8 @@
 </span></span><span class="line"><span class="cl"><span class="gh"># Basics
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>
 </span></span><span class="line"><span class="cl">Discover what this Cap'n Hugo theme be all about an' th' core concepts behind it.</span></span></code></pre></div><p>renders as</p>
-<p><a href="#R-image-9d70debd2d9b8800223541c02866e0a7" class="lightbox-link"><img src="../../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-9d70debd2d9b8800223541c02866e0a7"><img src="../../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f74b3dba6c5b87761c9cc8bbc462deb4" class="lightbox-link"><img src="../../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f74b3dba6c5b87761c9cc8bbc462deb4"><img src="../../../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>Th' Relearrrn theme provides archetypes t' create skeletons fer yer website. Begin by creat'n yer first chapter plank wit' th' follow'n command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter basics/_index.md</span></span></code></pre></div><p>By open'n th' given file, ye should see th' property <code>chapter=true</code> on top, mean'n this plank be a <em>chapter</em>.</p>
 <p>By default all chapters an' planks be created as a draft. If ye want t' render these planks, remove th' property <code>draft: true</code> from th' metadata.</p>
@@ -163,8 +163,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/basics/migration/index.html b/pir/basics/migration/index.html
index 97315dad05..5e20e2074a 100644
--- a/pir/basics/migration/index.html
+++ b/pir/basics/migration/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/migration/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/basics/migration/index.xml" rel="alternate" type="application/rss+xml" title="What&#39;s New :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/migration/index.print.html" rel="alternate" type="text/html" title="What&#39;s New :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -213,8 +213,8 @@
 <p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> Th' light themes have a bit more contrast fer rrrambl'n text an' head'ns. Also th' syntaxhighlight'n was changed t' th' more colorful MonokaiLight. This br'ns th' syntaxhighlightn'n 'n sync wit' th' correspond'n dark theme variants, which be us'n Monokai.</p>
 </li>
 <li>
-<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Ye now can configure opt'ns fer every theme variant 'n yer <code>config.toml</code>. This allows fer optional <a href="../../../basics/branding/index.html#theme-variant-advanced">advanced functionality</a>. Ye don&rsquo;t need t' change anyth'n as th' old configurat'n opt'ns will still work (but may generate warnings now).</p>
-<p>Th' advanced functionality allows ye t' set an explicit name fer a theme variant, set different colors (if ye be us'n monochrome SVGs) or even different ay'cons (handy if ye want t' adjust colors fer PNGs, GIFs or JPGs) an' provide an extended way t' configure th' automatic switch o' variants based on yer OS sett'ns.</p>
+<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Ye now can configure additional opt'ns fer every theme variant 'n yer <code>config.toml</code>. This allows fer optional <a href="../../../basics/branding/index.html#theme-variant-advanced">advanced functionality</a>. Ye don&rsquo;t need t' change anyth'n as th' old configurat'n opt'ns will still work (but may generate warnings now).</p>
+<p>Th' advanced functionality allows ye t' set an explicit name fer a theme variant, set different colors (if ye be us'n monochrome SVGs) or even different ay'cons (handy if ye want t' adjust colors fer PNGs, GIFs or JPGs) an' now allows fer multiple auto mode variants that adjust t' th' light/dark preference o' yer OS sett'ns.</p>
 </li>
 </ul>
 <hr>
@@ -1146,12 +1146,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../js/search.js?1700525735" defer></script>
+        <script src="../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -1241,9 +1241,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -1308,13 +1310,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/basics/migration/index.print.html b/pir/basics/migration/index.print.html
index 1ea27a4bba..4131dba770 100644
--- a/pir/basics/migration/index.print.html
+++ b/pir/basics/migration/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/migration/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/migration/index.html" rel="canonical" type="text/html" title="What&#39;s New :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/migration/index.xml" rel="alternate" type="application/rss+xml" title="What&#39;s New :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -124,8 +124,8 @@
 <p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> Th' light themes have a bit more contrast fer rrrambl'n text an' head'ns. Also th' syntaxhighlight'n was changed t' th' more colorful MonokaiLight. This br'ns th' syntaxhighlightn'n 'n sync wit' th' correspond'n dark theme variants, which be us'n Monokai.</p>
 </li>
 <li>
-<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Ye now can configure opt'ns fer every theme variant 'n yer <code>config.toml</code>. This allows fer optional <a href="../../../basics/branding/index.html#theme-variant-advanced">advanced functionality</a>. Ye don&rsquo;t need t' change anyth'n as th' old configurat'n opt'ns will still work (but may generate warnings now).</p>
-<p>Th' advanced functionality allows ye t' set an explicit name fer a theme variant, set different colors (if ye be us'n monochrome SVGs) or even different ay'cons (handy if ye want t' adjust colors fer PNGs, GIFs or JPGs) an' provide an extended way t' configure th' automatic switch o' variants based on yer OS sett'ns.</p>
+<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Ye now can configure additional opt'ns fer every theme variant 'n yer <code>config.toml</code>. This allows fer optional <a href="../../../basics/branding/index.html#theme-variant-advanced">advanced functionality</a>. Ye don&rsquo;t need t' change anyth'n as th' old configurat'n opt'ns will still work (but may generate warnings now).</p>
+<p>Th' advanced functionality allows ye t' set an explicit name fer a theme variant, set different colors (if ye be us'n monochrome SVGs) or even different ay'cons (handy if ye want t' adjust colors fer PNGs, GIFs or JPGs) an' now allows fer multiple auto mode variants that adjust t' th' light/dark preference o' yer OS sett'ns.</p>
 </li>
 </ul>
 <hr>
@@ -976,8 +976,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/basics/requirements/index.html b/pir/basics/requirements/index.html
index 0cdbbf4baf..bfb6024085 100644
--- a/pir/basics/requirements/index.html
+++ b/pir/basics/requirements/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/requirements/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/basics/requirements/index.xml" rel="alternate" type="application/rss+xml" title="Requirrrements :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/requirements/index.print.html" rel="alternate" type="text/html" title="Requirrrements :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -126,8 +126,8 @@
 
 <p>Thanks t' th' simplicity o' Cap'n Hugo, this plank be as empty as this theme needs requirements.</p>
 <p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> o' th' <a href="https://gohugo.io/getting-started/installing/" target="_blank">Cap'n Hugo binary</a> fer yer OS (Windows, Linux, Mac).</p>
-<p><a href="#R-image-d045e1efc57f3d3fc2ba65bc67017199" class="lightbox-link"><img src="../../../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-d045e1efc57f3d3fc2ba65bc67017199"><img src="../../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f628a90f295b9755e3a248b64e27c509" class="lightbox-link"><img src="../../../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f628a90f295b9755e3a248b64e27c509"><img src="../../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 
             <footer class="footline">
@@ -224,12 +224,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../../js/search.js?1700525734" defer></script>
+        <script src="../../../js/auto-complete.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697953" defer></script>
+        <script src="../../../js/search.js?1700697953" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -319,9 +319,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -386,13 +388,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../../js/github-buttons.js?1700697953"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../../../js/theme.js?1700525734" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697953" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697953" defer></script>
+    <script src="../../../js/theme.js?1700697953" defer></script>
   </body>
 </html>
diff --git a/pir/basics/requirements/index.print.html b/pir/basics/requirements/index.print.html
index 79fdc33c6a..84be32d47b 100644
--- a/pir/basics/requirements/index.print.html
+++ b/pir/basics/requirements/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/requirements/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/requirements/index.html" rel="canonical" type="text/html" title="Requirrrements :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/requirements/index.xml" rel="alternate" type="application/rss+xml" title="Requirrrements :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -96,8 +96,8 @@
 
 <p>Thanks t' th' simplicity o' Cap'n Hugo, this plank be as empty as this theme needs requirements.</p>
 <p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> o' th' <a href="https://gohugo.io/getting-started/installing/" target="_blank">Cap'n Hugo binary</a> fer yer OS (Windows, Linux, Mac).</p>
-<p><a href="#R-image-d045e1efc57f3d3fc2ba65bc67017199" class="lightbox-link"><img src="../../../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-d045e1efc57f3d3fc2ba65bc67017199"><img src="../../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f628a90f295b9755e3a248b64e27c509" class="lightbox-link"><img src="../../../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f628a90f295b9755e3a248b64e27c509"><img src="../../../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 
             <footer class="footline">
@@ -113,8 +113,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/basics/topbar/index.html b/pir/basics/topbar/index.html
index a2ad7fef1a..202db9febd 100644
--- a/pir/basics/topbar/index.html
+++ b/pir/basics/topbar/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/topbar/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/basics/topbar/index.xml" rel="alternate" type="application/rss+xml" title="Topbarrr Modificat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/topbar/index.print.html" rel="alternate" type="text/html" title="Topbarrr Modificat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -155,8 +155,8 @@
 
 
 <p>Th' theme comes wit' a reasonably configured topbar.</p>
-<p><a href="#R-image-be5110ed7098b29c554e5d4e17b81c5d" class="lightbox-link"><img src="../../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-be5110ed7098b29c554e5d4e17b81c5d"><img src="../../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-3bce7fccaf80d6de39267ec626cfcefe" class="lightbox-link"><img src="../../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-3bce7fccaf80d6de39267ec626cfcefe"><img src="../../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>Nevertheless, yer requirements may differ from this configurat'n. Luckily th' theme got ye covered as th' themebar, its buttons an' th' functionality behind these buttons be fully configur'ble by ye.</p>
 
 <div class="box notices cstyle tip">
@@ -168,8 +168,8 @@
 </div>
 <h2 id="areas">Areas</h2>
 <p>Th' default configurat'n comes wit' three predefined areas that may contain an arbitrary set o' buttons.</p>
-<p><a href="#R-image-32288507b2090cf79d2cb98070ffc626" class="lightbox-link"><img src="../../../basics/topbar/topbar-areas.png" alt="Topbar wit' default areas marked" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-32288507b2090cf79d2cb98070ffc626"><img src="../../../basics/topbar/topbar-areas.png" alt="Topbar wit' default areas marked" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-607f48ec9861c60e9a220ae32a57752f" class="lightbox-link"><img src="../../../basics/topbar/topbar-areas.png" alt="Topbar wit' default areas marked" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-607f48ec9861c60e9a220ae32a57752f"><img src="../../../basics/topbar/topbar-areas.png" alt="Topbar wit' default areas marked" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <ul>
 <li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/start.html" target="_blank"><strong>start</strong></a>: shown between menu an' breadcrumb</li>
 <li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/end.html" target="_blank"><strong>end</strong></a>: shown on th' opposite breadcrumb side 'n comparison t' th' <em>start</em> area</li>
@@ -569,12 +569,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../../js/search.js?1700525734" defer></script>
+        <script src="../../../js/auto-complete.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697953" defer></script>
+        <script src="../../../js/search.js?1700697953" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -664,9 +664,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -731,13 +733,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../../js/github-buttons.js?1700697953"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../../../js/theme.js?1700525734" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697953" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697953" defer></script>
+    <script src="../../../js/theme.js?1700697953" defer></script>
   </body>
 </html>
diff --git a/pir/basics/topbar/index.print.html b/pir/basics/topbar/index.print.html
index 06328c25b1..f979bdda96 100644
--- a/pir/basics/topbar/index.print.html
+++ b/pir/basics/topbar/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/topbar/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/topbar/index.html" rel="canonical" type="text/html" title="Topbarrr Modificat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/topbar/index.xml" rel="alternate" type="application/rss+xml" title="Topbarrr Modificat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -95,8 +95,8 @@
 
 
 <p>Th' theme comes wit' a reasonably configured topbar.</p>
-<p><a href="#R-image-be5110ed7098b29c554e5d4e17b81c5d" class="lightbox-link"><img src="../../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-be5110ed7098b29c554e5d4e17b81c5d"><img src="../../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-3bce7fccaf80d6de39267ec626cfcefe" class="lightbox-link"><img src="../../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-3bce7fccaf80d6de39267ec626cfcefe"><img src="../../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>Nevertheless, yer requirements may differ from this configurat'n. Luckily th' theme got ye covered as th' themebar, its buttons an' th' functionality behind these buttons be fully configur'ble by ye.</p>
 
 <div class="box notices cstyle tip">
@@ -108,8 +108,8 @@
 </div>
 <h2 id="areas">Areas</h2>
 <p>Th' default configurat'n comes wit' three predefined areas that may contain an arbitrary set o' buttons.</p>
-<p><a href="#R-image-32288507b2090cf79d2cb98070ffc626" class="lightbox-link"><img src="../../../basics/topbar/topbar-areas.png" alt="Topbar wit' default areas marked" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-32288507b2090cf79d2cb98070ffc626"><img src="../../../basics/topbar/topbar-areas.png" alt="Topbar wit' default areas marked" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-607f48ec9861c60e9a220ae32a57752f" class="lightbox-link"><img src="../../../basics/topbar/topbar-areas.png" alt="Topbar wit' default areas marked" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-607f48ec9861c60e9a220ae32a57752f"><img src="../../../basics/topbar/topbar-areas.png" alt="Topbar wit' default areas marked" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <ul>
 <li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/start.html" target="_blank"><strong>start</strong></a>: shown between menu an' breadcrumb</li>
 <li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/end.html" target="_blank"><strong>end</strong></a>: shown on th' opposite breadcrumb side 'n comparison t' th' <em>start</em> area</li>
@@ -428,8 +428,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/categories/basic/index.html b/pir/categories/basic/index.html
index aabd3a6e0d..cada498c97 100644
--- a/pir/categories/basic/index.html
+++ b/pir/categories/basic/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/basic/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/basic/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/categories/basic/index.xml" rel="alternate" type="application/rss+xml" title="basic :: Categorrry :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -217,12 +217,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../js/search.js?1700525735" defer></script>
+        <script src="../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -312,9 +312,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -379,13 +381,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/categories/content/index.html b/pir/categories/content/index.html
index 195453a0f4..207e61efe9 100644
--- a/pir/categories/content/index.html
+++ b/pir/categories/content/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/content/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/content/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/categories/content/index.xml" rel="alternate" type="application/rss+xml" title="content :: Categorrry :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -217,12 +217,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../js/search.js?1700525735" defer></script>
+        <script src="../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -312,9 +312,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -379,13 +381,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/categories/custom/index.html b/pir/categories/custom/index.html
index 7f91cf3306..93a3d01832 100644
--- a/pir/categories/custom/index.html
+++ b/pir/categories/custom/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/custom/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/custom/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/categories/custom/index.xml" rel="alternate" type="application/rss+xml" title="custom :: Categorrry :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -217,12 +217,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../js/search.js?1700525735" defer></script>
+        <script src="../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -312,9 +312,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -379,13 +381,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/categories/index.html b/pir/categories/index.html
index 0c9c697166..1752e434d5 100644
--- a/pir/categories/index.html
+++ b/pir/categories/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/index.html" rel="alternate" hreflang="pir">
     <link href="../../pir/categories/index.xml" rel="alternate" type="application/rss+xml" title="Categories :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -228,12 +228,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../js/search.js?1700525735" defer></script>
+        <script src="../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -323,9 +323,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -390,13 +392,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../js/theme.js?1700525735" defer></script>
+    <script src="../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/categories/taxonomy/index.html b/pir/categories/taxonomy/index.html
index 083ac45d8e..8e38da0481 100644
--- a/pir/categories/taxonomy/index.html
+++ b/pir/categories/taxonomy/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/taxonomy/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/taxonomy/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/categories/taxonomy/index.xml" rel="alternate" type="application/rss+xml" title="taxonomy :: Categorrry :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -217,12 +217,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../js/search.js?1700525735" defer></script>
+        <script src="../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -312,9 +312,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -379,13 +381,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/categories/theming/index.html b/pir/categories/theming/index.html
index 5c854bbeeb..195f0df6e6 100644
--- a/pir/categories/theming/index.html
+++ b/pir/categories/theming/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/theming/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/theming/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/categories/theming/index.xml" rel="alternate" type="application/rss+xml" title="theming :: Categorrry :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -222,12 +222,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../js/search.js?1700525735" defer></script>
+        <script src="../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -317,9 +317,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -384,13 +386,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/cont/archetypes/index.html b/pir/cont/archetypes/index.html
index dd2c5e58e6..427b8ce554 100644
--- a/pir/cont/archetypes/index.html
+++ b/pir/cont/archetypes/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/archetypes/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/cont/archetypes/index.xml" rel="alternate" type="application/rss+xml" title="Arrrchetypes :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/archetypes/index.print.html" rel="alternate" type="text/html" title="Arrrchetypes :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -155,8 +155,8 @@
 <h2 id="predefined-archetypes">Predefined Archetypes</h2>
 <h3 id="archetypes-home">Home</h3>
 <p>A <strong>Home</strong> plank be th' start'n plank o' yer project. It&rsquo;s best t' have only one plank o' this kind 'n yer project.</p>
-<p><a href="#R-image-c14f410863162434966b193edd277064" class="lightbox-link"><img src="../../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-c14f410863162434966b193edd277064"><img src="../../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-46441923928e252d61c857264dfedd40" class="lightbox-link"><img src="../../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-46441923928e252d61c857264dfedd40"><img src="../../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>T' create a home plank, run th' follow'n command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind home _index.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -166,8 +166,8 @@
 </span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><h3 id="archetypes-chapter">Chapter</h3>
 <p>A <strong>Chapter</strong> displays a plank meant t' be used as introduct'n fer a set o' child planks. Commonly, it contains a simple title an' a catch line t' define rrrambl'n that can be found below it.</p>
-<p><a href="#R-image-be644194dfdfa0def8629e150bcc656b" class="lightbox-link"><img src="../../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-be644194dfdfa0def8629e150bcc656b"><img src="../../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-c863c1e681cdebc8ce46b669181055e8" class="lightbox-link"><img src="../../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-c863c1e681cdebc8ce46b669181055e8"><img src="../../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>T' create a chapter plank, run th' follow'n command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter &lt;name&gt;/_index.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -179,8 +179,8 @@
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><p>Replace th' <code>X</code> wit' a number. Because this number will be used t' generate th' subtitle o' th' chapter plank, set th' number t' a consecutive value start'n at 1 fer each new chapter level.</p>
 <h3 id="archetypes-default">Default</h3>
 <p>A <strong>Default</strong> plank be any other rrrambl'n plank. If ye set an unknown archetype 'n yer frontmatter, this archetype will be used t' generate th' plank.</p>
-<p><a href="#R-image-a792fc9566ab89d544de6f97c022f91a" class="lightbox-link"><img src="../../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-a792fc9566ab89d544de6f97c022f91a"><img src="../../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-cd56e4278f5526b6621add3c2ffef0e2" class="lightbox-link"><img src="../../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-cd56e4278f5526b6621add3c2ffef0e2"><img src="../../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>T' create a default plank, run either one o' th' follow'n commands</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;/_index.md</span></span></code></pre></div><p>or</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
@@ -313,12 +313,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../../js/search.js?1700525734" defer></script>
+        <script src="../../../js/auto-complete.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697953" defer></script>
+        <script src="../../../js/search.js?1700697953" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -408,9 +408,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -475,13 +477,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../../js/github-buttons.js?1700697953"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../../../js/theme.js?1700525734" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697953" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697953" defer></script>
+    <script src="../../../js/theme.js?1700697953" defer></script>
   </body>
 </html>
diff --git a/pir/cont/archetypes/index.print.html b/pir/cont/archetypes/index.print.html
index 9fa7a715b8..5c3778acc2 100644
--- a/pir/cont/archetypes/index.print.html
+++ b/pir/cont/archetypes/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/archetypes/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/archetypes/index.html" rel="canonical" type="text/html" title="Arrrchetypes :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/archetypes/index.xml" rel="alternate" type="application/rss+xml" title="Arrrchetypes :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -99,8 +99,8 @@
 <h2 id="predefined-archetypes">Predefined Archetypes</h2>
 <h3 id="archetypes-home">Home</h3>
 <p>A <strong>Home</strong> plank be th' start'n plank o' yer project. It&rsquo;s best t' have only one plank o' this kind 'n yer project.</p>
-<p><a href="#R-image-c14f410863162434966b193edd277064" class="lightbox-link"><img src="../../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-c14f410863162434966b193edd277064"><img src="../../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-46441923928e252d61c857264dfedd40" class="lightbox-link"><img src="../../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-46441923928e252d61c857264dfedd40"><img src="../../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>T' create a home plank, run th' follow'n command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind home _index.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -110,8 +110,8 @@
 </span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><h3 id="archetypes-chapter">Chapter</h3>
 <p>A <strong>Chapter</strong> displays a plank meant t' be used as introduct'n fer a set o' child planks. Commonly, it contains a simple title an' a catch line t' define rrrambl'n that can be found below it.</p>
-<p><a href="#R-image-be644194dfdfa0def8629e150bcc656b" class="lightbox-link"><img src="../../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-be644194dfdfa0def8629e150bcc656b"><img src="../../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-c863c1e681cdebc8ce46b669181055e8" class="lightbox-link"><img src="../../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-c863c1e681cdebc8ce46b669181055e8"><img src="../../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>T' create a chapter plank, run th' follow'n command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter &lt;name&gt;/_index.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -123,8 +123,8 @@
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><p>Replace th' <code>X</code> wit' a number. Because this number will be used t' generate th' subtitle o' th' chapter plank, set th' number t' a consecutive value start'n at 1 fer each new chapter level.</p>
 <h3 id="archetypes-default">Default</h3>
 <p>A <strong>Default</strong> plank be any other rrrambl'n plank. If ye set an unknown archetype 'n yer frontmatter, this archetype will be used t' generate th' plank.</p>
-<p><a href="#R-image-a792fc9566ab89d544de6f97c022f91a" class="lightbox-link"><img src="../../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-a792fc9566ab89d544de6f97c022f91a"><img src="../../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-cd56e4278f5526b6621add3c2ffef0e2" class="lightbox-link"><img src="../../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-cd56e4278f5526b6621add3c2ffef0e2"><img src="../../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>T' create a default plank, run either one o' th' follow'n commands</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;/_index.md</span></span></code></pre></div><p>or</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
@@ -176,8 +176,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/cont/i18n/index.html b/pir/cont/i18n/index.html
index ea0cb45d47..900c30ae7b 100644
--- a/pir/cont/i18n/index.html
+++ b/pir/cont/i18n/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/i18n/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/cont/i18n/index.xml" rel="alternate" type="application/rss+xml" title="Multilingual an&#39; i18n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/i18n/index.print.html" rel="alternate" type="text/html" title="Multilingual an&#39; i18n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -152,8 +152,8 @@
 <li>Automatic menu generat'n from multilingual rrrambl'n</li>
 <li>In-browser language switch'n</li>
 </ul>
-<p><a href="#R-image-70394f4d09f0a65864ad157665d1d8cc" class="lightbox-link"><img src="../../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-70394f4d09f0a65864ad157665d1d8cc"><img src="../../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-37ad4e7f4a5443e2ead5a0b13db76d81" class="lightbox-link"><img src="../../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-37ad4e7f4a5443e2ead5a0b13db76d81"><img src="../../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="basic-configuration">Basic configurat'n</h2>
 <p>Aft learn'n <a href="https://gohugo.io/content-management/multilingual" target="_blank">how Cap'n Hugo handle multilingual websites</a>, define yer languages 'n yer <code>config.toml</code> file.</p>
 <p>For example wit' current English an' Piratized English website.</p>
@@ -335,12 +335,12 @@ You&rsquo;ll see error reports 'n yer browsers console log fer each unsupported
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../../js/search.js?1700525734" defer></script>
+        <script src="../../../js/auto-complete.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697953" defer></script>
+        <script src="../../../js/search.js?1700697953" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -430,9 +430,11 @@ You&rsquo;ll see error reports 'n yer browsers console log fer each unsupported
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -497,13 +499,13 @@ You&rsquo;ll see error reports 'n yer browsers console log fer each unsupported
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../../js/github-buttons.js?1700697953"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../../../js/theme.js?1700525734" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697953" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697953" defer></script>
+    <script src="../../../js/theme.js?1700697953" defer></script>
   </body>
 </html>
diff --git a/pir/cont/i18n/index.print.html b/pir/cont/i18n/index.print.html
index eb990e7e36..0768180197 100644
--- a/pir/cont/i18n/index.print.html
+++ b/pir/cont/i18n/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/i18n/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/i18n/index.html" rel="canonical" type="text/html" title="Multilingual an&#39; i18n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/i18n/index.xml" rel="alternate" type="application/rss+xml" title="Multilingual an&#39; i18n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -101,8 +101,8 @@
 <li>Automatic menu generat'n from multilingual rrrambl'n</li>
 <li>In-browser language switch'n</li>
 </ul>
-<p><a href="#R-image-70394f4d09f0a65864ad157665d1d8cc" class="lightbox-link"><img src="../../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-70394f4d09f0a65864ad157665d1d8cc"><img src="../../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-37ad4e7f4a5443e2ead5a0b13db76d81" class="lightbox-link"><img src="../../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-37ad4e7f4a5443e2ead5a0b13db76d81"><img src="../../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="basic-configuration">Basic configurat'n</h2>
 <p>Aft learn'n <a href="https://gohugo.io/content-management/multilingual" target="_blank">how Cap'n Hugo handle multilingual websites</a>, define yer languages 'n yer <code>config.toml</code> file.</p>
 <p>For example wit' current English an' Piratized English website.</p>
@@ -203,8 +203,8 @@ You&rsquo;ll see error reports 'n yer browsers console log fer each unsupported
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/cont/imageeffects/index.html b/pir/cont/imageeffects/index.html
index 28bc692e9e..ffc437669c 100644
--- a/pir/cont/imageeffects/index.html
+++ b/pir/cont/imageeffects/index.html
@@ -32,20 +32,20 @@ Without any sett&#39;ns &#39;n yer config.toml this defaults t&#39;">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/imageeffects/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/cont/imageeffects/index.xml" rel="alternate" type="application/rss+xml" title="Image Effects :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/imageeffects/index.print.html" rel="alternate" type="text/html" title="Image Effects :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -55,7 +55,7 @@ Without any sett&#39;ns &#39;n yer config.toml this defaults t&#39;">
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -154,13 +154,13 @@ Without any sett&#39;ns &#39;n yer config.toml this defaults t&#39;">
 <p>Without any sett'ns 'n yer <code>config.toml</code> this defaults t'</p>
 
   
-<div class="tab-panel" data-tab-group="a6666e486004a00c00c1ff56e3a314b4">
+<div class="tab-panel" data-tab-group="687b5bf0ca2c3e5f69a48ae21286a3ca">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('a6666e486004a00c00c1ff56e3a314b4','configtoml')"
+      onclick="switchTab('687b5bf0ca2c3e5f69a48ae21286a3ca','configtoml')"
     >
       <span class="tab-nav-text">config.toml</span>
     </button>
@@ -181,13 +181,13 @@ Without any sett&#39;ns &#39;n yer config.toml this defaults t&#39;">
 </div><p>This can be overridden 'n a planks frontmatter by eg.</p>
 
   
-<div class="tab-panel" data-tab-group="36633fc15468f31c9b7cdcbd168d37a9">
+<div class="tab-panel" data-tab-group="300a0f4624ca8d9697ccdd8eb947e7e4">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="frontmatter"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('36633fc15468f31c9b7cdcbd168d37a9','frontmatter')"
+      onclick="switchTab('300a0f4624ca8d9697ccdd8eb947e7e4','frontmatter')"
     >
       <span class="tab-nav-text">frontmatter</span>
     </button>
@@ -207,13 +207,13 @@ Without any sett&#39;ns &#39;n yer config.toml this defaults t&#39;">
 </div><p>Or by explicitly override sett'ns by URL query parameter</p>
 
   
-<div class="tab-panel" data-tab-group="9306f0464897ba5c9a68ae4011b439c5">
+<div class="tab-panel" data-tab-group="cf4ff04f764ab6750053b7735d1b8a7e">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="url"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('9306f0464897ba5c9a68ae4011b439c5','url')"
+      onclick="switchTab('cf4ff04f764ab6750053b7735d1b8a7e','url')"
     >
       <span class="tab-nav-text">URL</span>
     </button>
@@ -230,13 +230,13 @@ Without any sett&#39;ns &#39;n yer config.toml this defaults t&#39;">
 </div><p>Th' sett'ns applied t' th' above image would be</p>
 
   
-<div class="tab-panel" data-tab-group="3a90fec70d384e04812a109a67d8ff8b">
+<div class="tab-panel" data-tab-group="dee7cf005be7771af2cbd980fbb6069b">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="result"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('3a90fec70d384e04812a109a67d8ff8b','result')"
+      onclick="switchTab('dee7cf005be7771af2cbd980fbb6069b','result')"
     >
       <span class="tab-nav-text">Result</span>
     </button>
@@ -256,13 +256,13 @@ Without any sett&#39;ns &#39;n yer config.toml this defaults t&#39;">
 </div><p>This ends up 'n th' follow'n HTML whar' th' parameter be converted t' CSS classes.</p>
 
   
-<div class="tab-panel" data-tab-group="1d6f6b9464e10ce2bf2136199fc86a6b">
+<div class="tab-panel" data-tab-group="c8de0f9bbbdbd7eecb37085a7d5b682e">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="html"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('1d6f6b9464e10ce2bf2136199fc86a6b','html')"
+      onclick="switchTab('c8de0f9bbbdbd7eecb37085a7d5b682e','html')"
     >
       <span class="tab-nav-text">HTML</span>
     </button>
@@ -376,12 +376,12 @@ Without any sett&#39;ns &#39;n yer config.toml this defaults t&#39;">
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../../js/search.js?1700525733" defer></script>
+        <script src="../../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -471,9 +471,11 @@ Without any sett&#39;ns &#39;n yer config.toml this defaults t&#39;">
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -538,13 +540,13 @@ Without any sett&#39;ns &#39;n yer config.toml this defaults t&#39;">
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/pir/cont/imageeffects/index.print.html b/pir/cont/imageeffects/index.print.html
index b6106fbc21..9dab28a29f 100644
--- a/pir/cont/imageeffects/index.print.html
+++ b/pir/cont/imageeffects/index.print.html
@@ -32,21 +32,21 @@ Without any sett&#39;ns &#39;n yer config.toml this defaults t&#39;">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/imageeffects/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/imageeffects/index.html" rel="canonical" type="text/html" title="Image Effects :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/imageeffects/index.xml" rel="alternate" type="application/rss+xml" title="Image Effects :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -56,7 +56,7 @@ Without any sett&#39;ns &#39;n yer config.toml this defaults t&#39;">
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -110,13 +110,13 @@ Without any sett&#39;ns &#39;n yer config.toml this defaults t&#39;">
 <p>Without any sett'ns 'n yer <code>config.toml</code> this defaults t'</p>
 
   
-<div class="tab-panel" data-tab-group="a6666e486004a00c00c1ff56e3a314b4">
+<div class="tab-panel" data-tab-group="687b5bf0ca2c3e5f69a48ae21286a3ca">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('a6666e486004a00c00c1ff56e3a314b4','configtoml')"
+      onclick="switchTab('687b5bf0ca2c3e5f69a48ae21286a3ca','configtoml')"
     >
       <span class="tab-nav-text">config.toml</span>
     </button>
@@ -137,13 +137,13 @@ Without any sett&#39;ns &#39;n yer config.toml this defaults t&#39;">
 </div><p>This can be overridden 'n a planks frontmatter by eg.</p>
 
   
-<div class="tab-panel" data-tab-group="36633fc15468f31c9b7cdcbd168d37a9">
+<div class="tab-panel" data-tab-group="300a0f4624ca8d9697ccdd8eb947e7e4">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="frontmatter"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('36633fc15468f31c9b7cdcbd168d37a9','frontmatter')"
+      onclick="switchTab('300a0f4624ca8d9697ccdd8eb947e7e4','frontmatter')"
     >
       <span class="tab-nav-text">frontmatter</span>
     </button>
@@ -163,13 +163,13 @@ Without any sett&#39;ns &#39;n yer config.toml this defaults t&#39;">
 </div><p>Or by explicitly override sett'ns by URL query parameter</p>
 
   
-<div class="tab-panel" data-tab-group="9306f0464897ba5c9a68ae4011b439c5">
+<div class="tab-panel" data-tab-group="cf4ff04f764ab6750053b7735d1b8a7e">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="url"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('9306f0464897ba5c9a68ae4011b439c5','url')"
+      onclick="switchTab('cf4ff04f764ab6750053b7735d1b8a7e','url')"
     >
       <span class="tab-nav-text">URL</span>
     </button>
@@ -186,13 +186,13 @@ Without any sett&#39;ns &#39;n yer config.toml this defaults t&#39;">
 </div><p>Th' sett'ns applied t' th' above image would be</p>
 
   
-<div class="tab-panel" data-tab-group="3a90fec70d384e04812a109a67d8ff8b">
+<div class="tab-panel" data-tab-group="dee7cf005be7771af2cbd980fbb6069b">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="result"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('3a90fec70d384e04812a109a67d8ff8b','result')"
+      onclick="switchTab('dee7cf005be7771af2cbd980fbb6069b','result')"
     >
       <span class="tab-nav-text">Result</span>
     </button>
@@ -212,13 +212,13 @@ Without any sett&#39;ns &#39;n yer config.toml this defaults t&#39;">
 </div><p>This ends up 'n th' follow'n HTML whar' th' parameter be converted t' CSS classes.</p>
 
   
-<div class="tab-panel" data-tab-group="1d6f6b9464e10ce2bf2136199fc86a6b">
+<div class="tab-panel" data-tab-group="c8de0f9bbbdbd7eecb37085a7d5b682e">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="html"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('1d6f6b9464e10ce2bf2136199fc86a6b','html')"
+      onclick="switchTab('c8de0f9bbbdbd7eecb37085a7d5b682e','html')"
     >
       <span class="tab-nav-text">HTML</span>
     </button>
@@ -251,8 +251,8 @@ Without any sett&#39;ns &#39;n yer config.toml this defaults t&#39;">
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/cont/index.html b/pir/cont/index.html
index b7148bf78f..d7a6a7e5f8 100644
--- a/pir/cont/index.html
+++ b/pir/cont/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/index.html" rel="alternate" hreflang="pir">
     <link href="../../pir/cont/index.xml" rel="alternate" type="application/rss+xml" title="Rambl&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../pir/cont/index.print.html" rel="alternate" type="text/html" title="Rambl&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -224,12 +224,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../js/search.js?1700525734" defer></script>
+        <script src="../../js/auto-complete.js?1700697953" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697953" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697953" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697953" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697953" defer></script>
+        <script src="../../js/search.js?1700697953" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -319,9 +319,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -386,13 +388,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../js/github-buttons.js?1700697953"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../../js/theme.js?1700525734" defer></script>
+    <script src="../../js/clipboard.min.js?1700697953" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697953" defer></script>
+    <script src="../../js/theme.js?1700697953" defer></script>
   </body>
 </html>
diff --git a/pir/cont/index.print.html b/pir/cont/index.print.html
index 0d8208b009..0ea2340ab9 100644
--- a/pir/cont/index.print.html
+++ b/pir/cont/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/index.html" rel="canonical" type="text/html" title="Rambl&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../pir/cont/index.xml" rel="alternate" type="application/rss+xml" title="Rambl&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../js/url.js?1700525735"></script>
-    <script src="../../js/variant.js?1700525735"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../js/url.js?1700697954"></script>
+    <script src="../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -185,8 +185,8 @@
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
 </span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;GitHub repo&#34;</span>
 </span></span><span class="line"><span class="cl"><span class="nx">menuPre</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fab fa-github&#39;&gt;&lt;/i&gt; &#34;</span>
-</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#R-image-d55975adeb64483cee35d1996c0ff65f" class="lightbox-link"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-d55975adeb64483cee35d1996c0ff65f"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#R-image-97fc5c22d2205d41a026c974f6c9ce9b" class="lightbox-link"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-97fc5c22d2205d41a026c974f6c9ce9b"><img src="../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h3 id="ordering-sibling-menupage-entries">Order'n sibl'n menu/page entries</h3>
 <p>Cap'n Hugo provides a <a href="https://gohugo.io/content/ordering/" target="_blank">flex'ble way</a> t' handle order fer yer planks.</p>
 <p>Th' simplest way be t' set <code>weight</code> parameter t' a number.</p>
@@ -236,8 +236,8 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
 <h2 id="predefined-archetypes">Predefined Archetypes</h2>
 <h3 id="archetypes-home">Home</h3>
 <p>A <strong>Home</strong> plank be th' start'n plank o' yer project. It&rsquo;s best t' have only one plank o' this kind 'n yer project.</p>
-<p><a href="#R-image-c14f410863162434966b193edd277064" class="lightbox-link"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-c14f410863162434966b193edd277064"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-46441923928e252d61c857264dfedd40" class="lightbox-link"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-46441923928e252d61c857264dfedd40"><img src="../../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>T' create a home plank, run th' follow'n command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind home _index.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -247,8 +247,8 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
 </span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><h3 id="archetypes-chapter">Chapter</h3>
 <p>A <strong>Chapter</strong> displays a plank meant t' be used as introduct'n fer a set o' child planks. Commonly, it contains a simple title an' a catch line t' define rrrambl'n that can be found below it.</p>
-<p><a href="#R-image-be644194dfdfa0def8629e150bcc656b" class="lightbox-link"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-be644194dfdfa0def8629e150bcc656b"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-c863c1e681cdebc8ce46b669181055e8" class="lightbox-link"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-c863c1e681cdebc8ce46b669181055e8"><img src="../../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>T' create a chapter plank, run th' follow'n command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter &lt;name&gt;/_index.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -260,8 +260,8 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><p>Replace th' <code>X</code> wit' a number. Because this number will be used t' generate th' subtitle o' th' chapter plank, set th' number t' a consecutive value start'n at 1 fer each new chapter level.</p>
 <h3 id="archetypes-default">Default</h3>
 <p>A <strong>Default</strong> plank be any other rrrambl'n plank. If ye set an unknown archetype 'n yer frontmatter, this archetype will be used t' generate th' plank.</p>
-<p><a href="#R-image-a792fc9566ab89d544de6f97c022f91a" class="lightbox-link"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-a792fc9566ab89d544de6f97c022f91a"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-cd56e4278f5526b6621add3c2ffef0e2" class="lightbox-link"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-cd56e4278f5526b6621add3c2ffef0e2"><img src="../../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>T' create a default plank, run either one o' th' follow'n commands</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;/_index.md</span></span></code></pre></div><p>or</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
@@ -835,8 +835,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-d102233d9d0138fc5defd93c4680ad0d" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-d102233d9d0138fc5defd93c4680ad0d"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-85fc1a9b4d2346568268ce2d1bc3d503" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-85fc1a9b4d2346568268ce2d1bc3d503"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-with-tooltip">Image wit' Tooltip</h3>
@@ -846,8 +846,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-0149d024b7eddf3e0076851065ec66ea" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-0149d024b7eddf3e0076851065ec66ea"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f2b4d6318fa7d80a87412628c990db51" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f2b4d6318fa7d80a87412628c990db51"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-references">Image References</h3>
@@ -859,8 +859,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-24c6bd85622f1c9d2a028015103aefed" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-24c6bd85622f1c9d2a028015103aefed"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-78cca16d14addd3a3275d3cfd60fa060" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-78cca16d14addd3a3275d3cfd60fa060"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-effects">Image Effects</h3>
@@ -872,8 +872,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-2223114194645eca39dd33cdaea61bed" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-2223114194645eca39dd33cdaea61bed"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-eacbf0dcf1ae5f933a9256a5c7d42a23" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-eacbf0dcf1ae5f933a9256a5c7d42a23"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px</span>)</span></span></code></pre></div>
@@ -881,8 +881,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-9a10eb837968eba2af68a5fb99d2318d" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-9a10eb837968eba2af68a5fb99d2318d"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-589e2c7f739a1d1efe3c6d7b3f1eb864" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-589e2c7f739a1d1efe3c6d7b3f1eb864"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw</span>)</span></span></code></pre></div>
@@ -890,8 +890,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-f144f18693f874586254788d12f7a960" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-f144f18693f874586254788d12f7a960"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-791529c748fe4fc18df9a5d515c3b81a" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-791529c748fe4fc18df9a5d515c3b81a"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="css-classes">CSS Classes</h4>
@@ -902,8 +902,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-4c562bdaaa198cd2d4f240ae13f526fa" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-4c562bdaaa198cd2d4f240ae13f526fa"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
+<p><a href="#R-image-72fe9333ba11e382e7868b886b95f79d" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-72fe9333ba11e382e7868b886b95f79d"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="border">Border</h5>
@@ -912,8 +912,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-7bb457a3fe1a41c4dfc7246e39f6dd80" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-7bb457a3fe1a41c4dfc7246e39f6dd80"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-4fdcd64acf6a54e44ca2d2c2469f2b1d" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-4fdcd64acf6a54e44ca2d2c2469f2b1d"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="left">Left</h5>
@@ -922,8 +922,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-7436a54f9c59716107e47564d63f6b0d" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-7436a54f9c59716107e47564d63f6b0d"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-198eb52d0f58ff53e79cf9ab552468ad" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-198eb52d0f58ff53e79cf9ab552468ad"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="right">Right</h5>
@@ -932,8 +932,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-487c627580865b87b59508c8a360259d" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-487c627580865b87b59508c8a360259d"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-92fc6ad4cc09eab62d67c76f1352df5d" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-92fc6ad4cc09eab62d67c76f1352df5d"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="inline">Inline</h5>
@@ -945,14 +945,14 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-bf95befaadcfae5ee9010e8c25ff246b" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-bf95befaadcfae5ee9010e8c25ff246b"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#R-image-caced1efa234c5acf8e46d760abd6b66" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-caced1efa234c5acf8e46d760abd6b66"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#R-image-f57681a0ea4f6b1098292011381e9a16" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-f57681a0ea4f6b1098292011381e9a16"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#R-image-25a8043a9474efa9d41f8b465fae49f0" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-25a8043a9474efa9d41f8b465fae49f0"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-c540afb7e4bbab459fc34f1f86733ba0" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-c540afb7e4bbab459fc34f1f86733ba0"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#R-image-2115589c6288d24e0f9e970d345860c2" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-2115589c6288d24e0f9e970d345860c2"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#R-image-d6903e3814c786575c4a8a069e8fdd76" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-d6903e3814c786575c4a8a069e8fdd76"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#R-image-90792f669c703a3064bec8a98401cf4c" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-90792f669c703a3064bec8a98401cf4c"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="combination">Combinat'n</h5>
@@ -961,8 +961,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-daa7c7ad08de77f69a3a46d057a715f4" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-daa7c7ad08de77f69a3a46d057a715f4"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
+<p><a href="#R-image-802a04f070edc67bba8f6d31a6bcf722" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-802a04f070edc67bba8f6d31a6bcf722"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="lightbox">Lightbox</h4>
@@ -1003,13 +1003,13 @@ line 3 o' code
 <p>Without any sett'ns 'n yer <code>config.toml</code> this defaults t'</p>
 
   
-<div class="tab-panel" data-tab-group="a6666e486004a00c00c1ff56e3a314b4">
+<div class="tab-panel" data-tab-group="687b5bf0ca2c3e5f69a48ae21286a3ca">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('a6666e486004a00c00c1ff56e3a314b4','configtoml')"
+      onclick="switchTab('687b5bf0ca2c3e5f69a48ae21286a3ca','configtoml')"
     >
       <span class="tab-nav-text">config.toml</span>
     </button>
@@ -1030,13 +1030,13 @@ line 3 o' code
 </div><p>This can be overridden 'n a planks frontmatter by eg.</p>
 
   
-<div class="tab-panel" data-tab-group="36633fc15468f31c9b7cdcbd168d37a9">
+<div class="tab-panel" data-tab-group="300a0f4624ca8d9697ccdd8eb947e7e4">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="frontmatter"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('36633fc15468f31c9b7cdcbd168d37a9','frontmatter')"
+      onclick="switchTab('300a0f4624ca8d9697ccdd8eb947e7e4','frontmatter')"
     >
       <span class="tab-nav-text">frontmatter</span>
     </button>
@@ -1056,13 +1056,13 @@ line 3 o' code
 </div><p>Or by explicitly override sett'ns by URL query parameter</p>
 
   
-<div class="tab-panel" data-tab-group="9306f0464897ba5c9a68ae4011b439c5">
+<div class="tab-panel" data-tab-group="cf4ff04f764ab6750053b7735d1b8a7e">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="url"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('9306f0464897ba5c9a68ae4011b439c5','url')"
+      onclick="switchTab('cf4ff04f764ab6750053b7735d1b8a7e','url')"
     >
       <span class="tab-nav-text">URL</span>
     </button>
@@ -1079,13 +1079,13 @@ line 3 o' code
 </div><p>Th' sett'ns applied t' th' above image would be</p>
 
   
-<div class="tab-panel" data-tab-group="3a90fec70d384e04812a109a67d8ff8b">
+<div class="tab-panel" data-tab-group="dee7cf005be7771af2cbd980fbb6069b">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="result"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('3a90fec70d384e04812a109a67d8ff8b','result')"
+      onclick="switchTab('dee7cf005be7771af2cbd980fbb6069b','result')"
     >
       <span class="tab-nav-text">Result</span>
     </button>
@@ -1105,13 +1105,13 @@ line 3 o' code
 </div><p>This ends up 'n th' follow'n HTML whar' th' parameter be converted t' CSS classes.</p>
 
   
-<div class="tab-panel" data-tab-group="1d6f6b9464e10ce2bf2136199fc86a6b">
+<div class="tab-panel" data-tab-group="c8de0f9bbbdbd7eecb37085a7d5b682e">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="html"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('1d6f6b9464e10ce2bf2136199fc86a6b','html')"
+      onclick="switchTab('c8de0f9bbbdbd7eecb37085a7d5b682e','html')"
     >
       <span class="tab-nav-text">HTML</span>
     </button>
@@ -1290,8 +1290,8 @@ However, if ye want t' keep th' title but change its value, it can be overridden
 <li>Automatic menu generat'n from multilingual rrrambl'n</li>
 <li>In-browser language switch'n</li>
 </ul>
-<p><a href="#R-image-70394f4d09f0a65864ad157665d1d8cc" class="lightbox-link"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-70394f4d09f0a65864ad157665d1d8cc"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-37ad4e7f4a5443e2ead5a0b13db76d81" class="lightbox-link"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-37ad4e7f4a5443e2ead5a0b13db76d81"><img src="../../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="basic-configuration">Basic configurat'n</h2>
 <p>Aft learn'n <a href="https://gohugo.io/content-management/multilingual" target="_blank">how Cap'n Hugo handle multilingual websites</a>, define yer languages 'n yer <code>config.toml</code> file.</p>
 <p>For example wit' current English an' Piratized English website.</p>
@@ -1484,8 +1484,8 @@ You&rsquo;ll see error reports 'n yer browsers console log fer each unsupported
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../js/theme.js?1700525735" defer></script>
+    <script src="../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/cont/markdown/index.html b/pir/cont/markdown/index.html
index d0d591e397..c886488f6f 100644
--- a/pir/cont/markdown/index.html
+++ b/pir/cont/markdown/index.html
@@ -30,20 +30,20 @@ Marrrkdown be simple t&#39; learn, wit&#39; minimal extra characters so it&rsquo
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/markdown/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/cont/markdown/index.xml" rel="alternate" type="application/rss+xml" title="Marrrkdown rules :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/markdown/index.print.html" rel="alternate" type="text/html" title="Marrrkdown rules :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,7 +53,7 @@ Marrrkdown be simple t&#39; learn, wit&#39; minimal extra characters so it&rsquo
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -712,8 +712,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-d102233d9d0138fc5defd93c4680ad0d" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-d102233d9d0138fc5defd93c4680ad0d"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-85fc1a9b4d2346568268ce2d1bc3d503" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-85fc1a9b4d2346568268ce2d1bc3d503"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-with-tooltip">Image wit' Tooltip</h3>
@@ -723,8 +723,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-0149d024b7eddf3e0076851065ec66ea" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-0149d024b7eddf3e0076851065ec66ea"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f2b4d6318fa7d80a87412628c990db51" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f2b4d6318fa7d80a87412628c990db51"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-references">Image References</h3>
@@ -736,8 +736,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-24c6bd85622f1c9d2a028015103aefed" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-24c6bd85622f1c9d2a028015103aefed"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-78cca16d14addd3a3275d3cfd60fa060" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-78cca16d14addd3a3275d3cfd60fa060"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-effects">Image Effects</h3>
@@ -749,8 +749,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-2223114194645eca39dd33cdaea61bed" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-2223114194645eca39dd33cdaea61bed"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-eacbf0dcf1ae5f933a9256a5c7d42a23" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-eacbf0dcf1ae5f933a9256a5c7d42a23"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px</span>)</span></span></code></pre></div>
@@ -758,8 +758,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-9a10eb837968eba2af68a5fb99d2318d" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-9a10eb837968eba2af68a5fb99d2318d"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-589e2c7f739a1d1efe3c6d7b3f1eb864" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-589e2c7f739a1d1efe3c6d7b3f1eb864"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw</span>)</span></span></code></pre></div>
@@ -767,8 +767,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-f144f18693f874586254788d12f7a960" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-f144f18693f874586254788d12f7a960"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-791529c748fe4fc18df9a5d515c3b81a" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-791529c748fe4fc18df9a5d515c3b81a"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="css-classes">CSS Classes</h4>
@@ -779,8 +779,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-4c562bdaaa198cd2d4f240ae13f526fa" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-4c562bdaaa198cd2d4f240ae13f526fa"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
+<p><a href="#R-image-72fe9333ba11e382e7868b886b95f79d" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-72fe9333ba11e382e7868b886b95f79d"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="border">Border</h5>
@@ -789,8 +789,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-7bb457a3fe1a41c4dfc7246e39f6dd80" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-7bb457a3fe1a41c4dfc7246e39f6dd80"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-4fdcd64acf6a54e44ca2d2c2469f2b1d" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-4fdcd64acf6a54e44ca2d2c2469f2b1d"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="left">Left</h5>
@@ -799,8 +799,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-7436a54f9c59716107e47564d63f6b0d" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-7436a54f9c59716107e47564d63f6b0d"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-198eb52d0f58ff53e79cf9ab552468ad" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-198eb52d0f58ff53e79cf9ab552468ad"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="right">Right</h5>
@@ -809,8 +809,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-487c627580865b87b59508c8a360259d" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-487c627580865b87b59508c8a360259d"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-92fc6ad4cc09eab62d67c76f1352df5d" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-92fc6ad4cc09eab62d67c76f1352df5d"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="inline">Inline</h5>
@@ -822,14 +822,14 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-bf95befaadcfae5ee9010e8c25ff246b" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-bf95befaadcfae5ee9010e8c25ff246b"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#R-image-caced1efa234c5acf8e46d760abd6b66" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-caced1efa234c5acf8e46d760abd6b66"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#R-image-f57681a0ea4f6b1098292011381e9a16" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-f57681a0ea4f6b1098292011381e9a16"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#R-image-25a8043a9474efa9d41f8b465fae49f0" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-25a8043a9474efa9d41f8b465fae49f0"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-c540afb7e4bbab459fc34f1f86733ba0" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-c540afb7e4bbab459fc34f1f86733ba0"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#R-image-2115589c6288d24e0f9e970d345860c2" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-2115589c6288d24e0f9e970d345860c2"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#R-image-d6903e3814c786575c4a8a069e8fdd76" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-d6903e3814c786575c4a8a069e8fdd76"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#R-image-90792f669c703a3064bec8a98401cf4c" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-90792f669c703a3064bec8a98401cf4c"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="combination">Combinat'n</h5>
@@ -838,8 +838,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-daa7c7ad08de77f69a3a46d057a715f4" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-daa7c7ad08de77f69a3a46d057a715f4"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
+<p><a href="#R-image-802a04f070edc67bba8f6d31a6bcf722" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-802a04f070edc67bba8f6d31a6bcf722"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="lightbox">Lightbox</h4>
@@ -951,12 +951,12 @@ line 3 o' code
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../../js/search.js?1700525734" defer></script>
+        <script src="../../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -1046,9 +1046,11 @@ line 3 o' code
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -1113,13 +1115,13 @@ line 3 o' code
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../../../js/theme.js?1700525734" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/pir/cont/markdown/index.print.html b/pir/cont/markdown/index.print.html
index 6e5d9d02ef..977a2804dd 100644
--- a/pir/cont/markdown/index.print.html
+++ b/pir/cont/markdown/index.print.html
@@ -30,21 +30,21 @@ Marrrkdown be simple t&#39; learn, wit&#39; minimal extra characters so it&rsquo
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/markdown/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/markdown/index.html" rel="canonical" type="text/html" title="Marrrkdown rules :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/markdown/index.xml" rel="alternate" type="application/rss+xml" title="Marrrkdown rules :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,7 +54,7 @@ Marrrkdown be simple t&#39; learn, wit&#39; minimal extra characters so it&rsquo
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -620,8 +620,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-d102233d9d0138fc5defd93c4680ad0d" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-d102233d9d0138fc5defd93c4680ad0d"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-85fc1a9b4d2346568268ce2d1bc3d503" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-85fc1a9b4d2346568268ce2d1bc3d503"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-with-tooltip">Image wit' Tooltip</h3>
@@ -631,8 +631,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-0149d024b7eddf3e0076851065ec66ea" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-0149d024b7eddf3e0076851065ec66ea"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f2b4d6318fa7d80a87412628c990db51" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f2b4d6318fa7d80a87412628c990db51"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-references">Image References</h3>
@@ -644,8 +644,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-24c6bd85622f1c9d2a028015103aefed" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-24c6bd85622f1c9d2a028015103aefed"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-78cca16d14addd3a3275d3cfd60fa060" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-78cca16d14addd3a3275d3cfd60fa060"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-effects">Image Effects</h3>
@@ -657,8 +657,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-2223114194645eca39dd33cdaea61bed" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-2223114194645eca39dd33cdaea61bed"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-eacbf0dcf1ae5f933a9256a5c7d42a23" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-eacbf0dcf1ae5f933a9256a5c7d42a23"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px</span>)</span></span></code></pre></div>
@@ -666,8 +666,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-9a10eb837968eba2af68a5fb99d2318d" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-9a10eb837968eba2af68a5fb99d2318d"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-589e2c7f739a1d1efe3c6d7b3f1eb864" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-589e2c7f739a1d1efe3c6d7b3f1eb864"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw</span>)</span></span></code></pre></div>
@@ -675,8 +675,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-f144f18693f874586254788d12f7a960" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-f144f18693f874586254788d12f7a960"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-791529c748fe4fc18df9a5d515c3b81a" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-791529c748fe4fc18df9a5d515c3b81a"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="css-classes">CSS Classes</h4>
@@ -687,8 +687,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-4c562bdaaa198cd2d4f240ae13f526fa" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-4c562bdaaa198cd2d4f240ae13f526fa"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
+<p><a href="#R-image-72fe9333ba11e382e7868b886b95f79d" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-72fe9333ba11e382e7868b886b95f79d"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="border">Border</h5>
@@ -697,8 +697,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-7bb457a3fe1a41c4dfc7246e39f6dd80" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-7bb457a3fe1a41c4dfc7246e39f6dd80"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-4fdcd64acf6a54e44ca2d2c2469f2b1d" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-4fdcd64acf6a54e44ca2d2c2469f2b1d"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="left">Left</h5>
@@ -707,8 +707,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-7436a54f9c59716107e47564d63f6b0d" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-7436a54f9c59716107e47564d63f6b0d"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-198eb52d0f58ff53e79cf9ab552468ad" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-198eb52d0f58ff53e79cf9ab552468ad"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="right">Right</h5>
@@ -717,8 +717,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-487c627580865b87b59508c8a360259d" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-487c627580865b87b59508c8a360259d"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-92fc6ad4cc09eab62d67c76f1352df5d" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-92fc6ad4cc09eab62d67c76f1352df5d"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="inline">Inline</h5>
@@ -730,14 +730,14 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-bf95befaadcfae5ee9010e8c25ff246b" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-bf95befaadcfae5ee9010e8c25ff246b"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#R-image-caced1efa234c5acf8e46d760abd6b66" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-caced1efa234c5acf8e46d760abd6b66"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#R-image-f57681a0ea4f6b1098292011381e9a16" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-f57681a0ea4f6b1098292011381e9a16"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#R-image-25a8043a9474efa9d41f8b465fae49f0" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-25a8043a9474efa9d41f8b465fae49f0"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-c540afb7e4bbab459fc34f1f86733ba0" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-c540afb7e4bbab459fc34f1f86733ba0"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#R-image-2115589c6288d24e0f9e970d345860c2" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-2115589c6288d24e0f9e970d345860c2"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#R-image-d6903e3814c786575c4a8a069e8fdd76" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-d6903e3814c786575c4a8a069e8fdd76"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#R-image-90792f669c703a3064bec8a98401cf4c" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-90792f669c703a3064bec8a98401cf4c"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="combination">Combinat'n</h5>
@@ -746,8 +746,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-daa7c7ad08de77f69a3a46d057a715f4" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-daa7c7ad08de77f69a3a46d057a715f4"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
+<p><a href="#R-image-802a04f070edc67bba8f6d31a6bcf722" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-802a04f070edc67bba8f6d31a6bcf722"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="lightbox">Lightbox</h4>
@@ -778,8 +778,8 @@ line 3 o' code
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/cont/menushortcuts/index.html b/pir/cont/menushortcuts/index.html
index 6a8875c990..1af3009093 100644
--- a/pir/cont/menushortcuts/index.html
+++ b/pir/cont/menushortcuts/index.html
@@ -30,20 +30,20 @@ Example from th&#39; current website:
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/menushortcuts/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/cont/menushortcuts/index.xml" rel="alternate" type="application/rss+xml" title="Menu extrrra shorrrtcuts :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/menushortcuts/index.print.html" rel="alternate" type="text/html" title="Menu extrrra shorrrtcuts :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,7 +53,7 @@ Example from th&#39; current website:
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -361,12 +361,12 @@ However, if ye want t' keep th' title but change its value, it can be overridden
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../../js/search.js?1700525733" defer></script>
+        <script src="../../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -456,9 +456,11 @@ However, if ye want t' keep th' title but change its value, it can be overridden
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -523,13 +525,13 @@ However, if ye want t' keep th' title but change its value, it can be overridden
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/pir/cont/menushortcuts/index.print.html b/pir/cont/menushortcuts/index.print.html
index a6de679507..da5ae0066e 100644
--- a/pir/cont/menushortcuts/index.print.html
+++ b/pir/cont/menushortcuts/index.print.html
@@ -30,21 +30,21 @@ Example from th&#39; current website:
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/menushortcuts/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/menushortcuts/index.html" rel="canonical" type="text/html" title="Menu extrrra shorrrtcuts :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/menushortcuts/index.xml" rel="alternate" type="application/rss+xml" title="Menu extrrra shorrrtcuts :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,7 +54,7 @@ Example from th&#39; current website:
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -234,8 +234,8 @@ However, if ye want t' keep th' title but change its value, it can be overridden
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/cont/pages/index.html b/pir/cont/pages/index.html
index d1aada117c..589216b63f 100644
--- a/pir/cont/pages/index.html
+++ b/pir/cont/pages/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/pages/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/cont/pages/index.xml" rel="alternate" type="application/rss+xml" title="planks orrrganizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/pages/index.print.html" rel="alternate" type="text/html" title="planks orrrganizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -224,8 +224,8 @@
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
 </span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;GitHub repo&#34;</span>
 </span></span><span class="line"><span class="cl"><span class="nx">menuPre</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fab fa-github&#39;&gt;&lt;/i&gt; &#34;</span>
-</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#R-image-d55975adeb64483cee35d1996c0ff65f" class="lightbox-link"><img src="../../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-d55975adeb64483cee35d1996c0ff65f"><img src="../../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#R-image-97fc5c22d2205d41a026c974f6c9ce9b" class="lightbox-link"><img src="../../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-97fc5c22d2205d41a026c974f6c9ce9b"><img src="../../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h3 id="ordering-sibling-menupage-entries">Order'n sibl'n menu/page entries</h3>
 <p>Cap'n Hugo provides a <a href="https://gohugo.io/content/ordering/" target="_blank">flex'ble way</a> t' handle order fer yer planks.</p>
 <p>Th' simplest way be t' set <code>weight</code> parameter t' a number.</p>
@@ -348,12 +348,12 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../js/search.js?1700525735" defer></script>
+        <script src="../../../js/auto-complete.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697953" defer></script>
+        <script src="../../../js/search.js?1700697953" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -443,9 +443,11 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -510,13 +512,13 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../js/github-buttons.js?1700697953"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697953" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697953" defer></script>
+    <script src="../../../js/theme.js?1700697953" defer></script>
   </body>
 </html>
diff --git a/pir/cont/pages/index.print.html b/pir/cont/pages/index.print.html
index d13c6993e5..20a1e321c7 100644
--- a/pir/cont/pages/index.print.html
+++ b/pir/cont/pages/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/pages/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/pages/index.html" rel="canonical" type="text/html" title="planks orrrganizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/pages/index.xml" rel="alternate" type="application/rss+xml" title="planks orrrganizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -170,8 +170,8 @@
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
 </span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;GitHub repo&#34;</span>
 </span></span><span class="line"><span class="cl"><span class="nx">menuPre</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fab fa-github&#39;&gt;&lt;/i&gt; &#34;</span>
-</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#R-image-d55975adeb64483cee35d1996c0ff65f" class="lightbox-link"><img src="../../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-d55975adeb64483cee35d1996c0ff65f"><img src="../../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#R-image-97fc5c22d2205d41a026c974f6c9ce9b" class="lightbox-link"><img src="../../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-97fc5c22d2205d41a026c974f6c9ce9b"><img src="../../../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h3 id="ordering-sibling-menupage-entries">Order'n sibl'n menu/page entries</h3>
 <p>Cap'n Hugo provides a <a href="https://gohugo.io/content/ordering/" target="_blank">flex'ble way</a> t' handle order fer yer planks.</p>
 <p>Th' simplest way be t' set <code>weight</code> parameter t' a number.</p>
@@ -213,8 +213,8 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/cont/taxonomy/index.html b/pir/cont/taxonomy/index.html
index 2a5114d553..47625765b6 100644
--- a/pir/cont/taxonomy/index.html
+++ b/pir/cont/taxonomy/index.html
@@ -30,20 +30,20 @@ Th&#39; categories be displayed at th&#39; bottom o&#39; th&#39; plank &#39;n al
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/taxonomy/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/cont/taxonomy/index.xml" rel="alternate" type="application/rss+xml" title="Taxonomy :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/taxonomy/index.print.html" rel="alternate" type="text/html" title="Taxonomy :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,7 +53,7 @@ Th&#39; categories be displayed at th&#39; bottom o&#39; th&#39; plank &#39;n al
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -321,12 +321,12 @@ Th&#39; categories be displayed at th&#39; bottom o&#39; th&#39; plank &#39;n al
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../../js/search.js?1700525733" defer></script>
+        <script src="../../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -416,9 +416,11 @@ Th&#39; categories be displayed at th&#39; bottom o&#39; th&#39; plank &#39;n al
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -483,13 +485,13 @@ Th&#39; categories be displayed at th&#39; bottom o&#39; th&#39; plank &#39;n al
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/pir/cont/taxonomy/index.print.html b/pir/cont/taxonomy/index.print.html
index 207eb77337..fa915dd9ac 100644
--- a/pir/cont/taxonomy/index.print.html
+++ b/pir/cont/taxonomy/index.print.html
@@ -30,21 +30,21 @@ Th&#39; categories be displayed at th&#39; bottom o&#39; th&#39; plank &#39;n al
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/taxonomy/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/taxonomy/index.html" rel="canonical" type="text/html" title="Taxonomy :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/taxonomy/index.xml" rel="alternate" type="application/rss+xml" title="Taxonomy :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,7 +54,7 @@ Th&#39; categories be displayed at th&#39; bottom o&#39; th&#39; plank &#39;n al
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -189,8 +189,8 @@ Th&#39; categories be displayed at th&#39; bottom o&#39; th&#39; plank &#39;n al
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/dev/contributing/index.html b/pir/dev/contributing/index.html
index 6f37e63252..658faefbb5 100644
--- a/pir/dev/contributing/index.html
+++ b/pir/dev/contributing/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/contributing/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/contributing/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/contributing/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -345,12 +345,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../js/search.js?1700525735" defer></script>
+        <script src="../../../js/auto-complete.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697953" defer></script>
+        <script src="../../../js/search.js?1700697953" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -444,9 +444,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -511,13 +513,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/dev/contributing/index.print.html b/pir/dev/contributing/index.print.html
index 1ffdffb719..5d69cdb74e 100644
--- a/pir/dev/contributing/index.print.html
+++ b/pir/dev/contributing/index.print.html
@@ -22,21 +22,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/contributing/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/contributing/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/contributing/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -219,8 +219,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/dev/index.html b/pir/dev/index.html
index bc4f26ee33..af05bd9060 100644
--- a/pir/dev/index.html
+++ b/pir/dev/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -230,12 +230,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../js/search.js?1700525735" defer></script>
+        <script src="../../js/auto-complete.js?1700697953" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697953" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697953" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697953" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697953" defer></script>
+        <script src="../../js/search.js?1700697953" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -329,9 +329,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -396,13 +398,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../js/github-buttons.js?1700697953"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../js/theme.js?1700525735" defer></script>
+    <script src="../../js/clipboard.min.js?1700697953" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697953" defer></script>
+    <script src="../../js/theme.js?1700697953" defer></script>
   </body>
 </html>
diff --git a/pir/dev/index.print.html b/pir/dev/index.print.html
index 81143f608b..94bf454334 100644
--- a/pir/dev/index.print.html
+++ b/pir/dev/index.print.html
@@ -22,21 +22,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../js/url.js?1700525735"></script>
-    <script src="../../js/variant.js?1700525735"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../js/url.js?1700697954"></script>
+    <script src="../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -484,8 +484,8 @@
 <p><strong>Remarks</strong>:</p>
 <p>Th' locat'n be mandatory due t' Hugo&rsquo;s theme ship builder.</p>
 <p><strong>Preview</strong> <code>images/screenshot.png</code>:</p>
-<p><a href="#R-image-873c201dc3de9ca3ae015fce05070ed7" class="lightbox-link"><img src="../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-873c201dc3de9ca3ae015fce05070ed7"><img src="../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-69086259d809ee8940216f2751c67239" class="lightbox-link"><img src="../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-69086259d809ee8940216f2751c67239"><img src="../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="hero-image">Hero Image</h2>
 <p><strong>Rrrambl'n</strong>:</p>
 <p>Show th' <a href="#demo-screenshot">Demo Screenshot</a> plank on different devices an' different themes. Composit'n o' th' different device screenshots into a template.</p>
@@ -514,11 +514,11 @@
 <p><strong>Remarks</strong>:</p>
 <p>Th' locat'n o' <code>images/tn.png</code> be mandatory due t' Hugo&rsquo;s theme ship builder.</p>
 <p><strong>Preview</strong> <code>images/hero.png</code>:</p>
-<p><a href="#R-image-74896c9620f173a03b1100c2e9b5bc37" class="lightbox-link"><img src="../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-74896c9620f173a03b1100c2e9b5bc37"><img src="../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-78f30bd9d482361ab2482ec1ef7614fb" class="lightbox-link"><img src="../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-78f30bd9d482361ab2482ec1ef7614fb"><img src="../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p><strong>Preview</strong> <code>images/tn.png</code>:</p>
-<p><a href="#R-image-6055e7bf7e437ae03d2284671ca0de27" class="lightbox-link"><img src="../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-6055e7bf7e437ae03d2284671ca0de27"><img src="../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f506bbab1697a9b7a3f605382692b456" class="lightbox-link"><img src="../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f506bbab1697a9b7a3f605382692b456"><img src="../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 
             <footer class="footline">
@@ -529,8 +529,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../js/theme.js?1700525735" defer></script>
+    <script src="../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/dev/maintaining/index.html b/pir/dev/maintaining/index.html
index decdce61aa..ff0aaf7867 100644
--- a/pir/dev/maintaining/index.html
+++ b/pir/dev/maintaining/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/maintaining/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/maintaining/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/maintaining/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -436,12 +436,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../js/search.js?1700525735" defer></script>
+        <script src="../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -535,9 +535,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -602,13 +604,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/dev/maintaining/index.print.html b/pir/dev/maintaining/index.print.html
index f8742355ce..ab27ec26af 100644
--- a/pir/dev/maintaining/index.print.html
+++ b/pir/dev/maintaining/index.print.html
@@ -22,21 +22,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/maintaining/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/maintaining/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/maintaining/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -299,8 +299,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/dev/screenshots/index.html b/pir/dev/screenshots/index.html
index 3a0afd499d..3cb33741d1 100644
--- a/pir/dev/screenshots/index.html
+++ b/pir/dev/screenshots/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/screenshots/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/screenshots/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/screenshots/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -170,8 +170,8 @@
 <p><strong>Remarks</strong>:</p>
 <p>Th' locat'n be mandatory due t' Hugo&rsquo;s theme ship builder.</p>
 <p><strong>Preview</strong> <code>images/screenshot.png</code>:</p>
-<p><a href="#R-image-873c201dc3de9ca3ae015fce05070ed7" class="lightbox-link"><img src="../../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-873c201dc3de9ca3ae015fce05070ed7"><img src="../../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-69086259d809ee8940216f2751c67239" class="lightbox-link"><img src="../../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-69086259d809ee8940216f2751c67239"><img src="../../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="hero-image">Hero Image</h2>
 <p><strong>Rrrambl'n</strong>:</p>
 <p>Show th' <a href="#demo-screenshot">Demo Screenshot</a> plank on different devices an' different themes. Composit'n o' th' different device screenshots into a template.</p>
@@ -200,11 +200,11 @@
 <p><strong>Remarks</strong>:</p>
 <p>Th' locat'n o' <code>images/tn.png</code> be mandatory due t' Hugo&rsquo;s theme ship builder.</p>
 <p><strong>Preview</strong> <code>images/hero.png</code>:</p>
-<p><a href="#R-image-74896c9620f173a03b1100c2e9b5bc37" class="lightbox-link"><img src="../../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-74896c9620f173a03b1100c2e9b5bc37"><img src="../../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-78f30bd9d482361ab2482ec1ef7614fb" class="lightbox-link"><img src="../../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-78f30bd9d482361ab2482ec1ef7614fb"><img src="../../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p><strong>Preview</strong> <code>images/tn.png</code>:</p>
-<p><a href="#R-image-6055e7bf7e437ae03d2284671ca0de27" class="lightbox-link"><img src="../../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-6055e7bf7e437ae03d2284671ca0de27"><img src="../../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f506bbab1697a9b7a3f605382692b456" class="lightbox-link"><img src="../../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f506bbab1697a9b7a3f605382692b456"><img src="../../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 
             <footer class="footline">
@@ -295,12 +295,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../js/search.js?1700525735" defer></script>
+        <script src="../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -394,9 +394,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -461,13 +463,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/dev/screenshots/index.print.html b/pir/dev/screenshots/index.print.html
index 4d5aac0401..80849dfeaf 100644
--- a/pir/dev/screenshots/index.print.html
+++ b/pir/dev/screenshots/index.print.html
@@ -22,21 +22,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/screenshots/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/screenshots/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/screenshots/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -124,8 +124,8 @@
 <p><strong>Remarks</strong>:</p>
 <p>Th' locat'n be mandatory due t' Hugo&rsquo;s theme ship builder.</p>
 <p><strong>Preview</strong> <code>images/screenshot.png</code>:</p>
-<p><a href="#R-image-873c201dc3de9ca3ae015fce05070ed7" class="lightbox-link"><img src="../../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-873c201dc3de9ca3ae015fce05070ed7"><img src="../../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-69086259d809ee8940216f2751c67239" class="lightbox-link"><img src="../../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-69086259d809ee8940216f2751c67239"><img src="../../../images/screenshot.png?width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="hero-image">Hero Image</h2>
 <p><strong>Rrrambl'n</strong>:</p>
 <p>Show th' <a href="#demo-screenshot">Demo Screenshot</a> plank on different devices an' different themes. Composit'n o' th' different device screenshots into a template.</p>
@@ -154,11 +154,11 @@
 <p><strong>Remarks</strong>:</p>
 <p>Th' locat'n o' <code>images/tn.png</code> be mandatory due t' Hugo&rsquo;s theme ship builder.</p>
 <p><strong>Preview</strong> <code>images/hero.png</code>:</p>
-<p><a href="#R-image-74896c9620f173a03b1100c2e9b5bc37" class="lightbox-link"><img src="../../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-74896c9620f173a03b1100c2e9b5bc37"><img src="../../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-78f30bd9d482361ab2482ec1ef7614fb" class="lightbox-link"><img src="../../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-78f30bd9d482361ab2482ec1ef7614fb"><img src="../../../images/hero.png?width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p><strong>Preview</strong> <code>images/tn.png</code>:</p>
-<p><a href="#R-image-6055e7bf7e437ae03d2284671ca0de27" class="lightbox-link"><img src="../../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-6055e7bf7e437ae03d2284671ca0de27"><img src="../../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f506bbab1697a9b7a3f605382692b456" class="lightbox-link"><img src="../../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="figure-image bg-white border lightbox noshadow" style="height: 100%; width: 100%;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f506bbab1697a9b7a3f605382692b456"><img src="../../../images/tn.png?width=100%25&amp;height=100%25" alt="tn" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 
             <footer class="footline">
@@ -168,8 +168,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/index.html b/pir/index.html
index 9ca0239b48..5a6eeb8c2f 100644
--- a/pir/index.html
+++ b/pir/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/index.html" rel="alternate" hreflang="pir">
     <link href="../pir/index.xml" rel="alternate" type="application/rss+xml" title="Cap&#39;n Hugo Relearrrn Theme">
     <link href="../pir/index.print.html" rel="alternate" type="text/html" title="Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../js/url.js?1700525733"></script>
-    <script src="../js/variant.js?1700525733"></script>
+    <link href="../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../js/url.js?1700697952"></script>
+    <script src="../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -150,8 +150,8 @@
 </div>
 <p>A theme fer <a href="https://gohugo.io/" target="_blank">Cap'n Hugo</a> designed fer documentat'n.</p>
 <p><a href="../basics/migration/index.html">★ What&rsquo;s new 'n th' latest release ★</a></p>
-<p><a href="#R-image-818d64ecb153669ff09235478c06f428" class="lightbox-link"><img src="../images/hero.png?width=100%25&amp;height=100%25" alt="Image o' th' Relearrrn theme 'n light an' dark mode on phone, tablet an' desktop" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-818d64ecb153669ff09235478c06f428"><img src="../images/hero.png?width=100%25&amp;height=100%25" alt="Image o' th' Relearrrn theme 'n light an' dark mode on phone, tablet an' desktop" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-6f0fc7970b5893fc9f479ebc7763fa78" class="lightbox-link"><img src="../images/hero.png?width=100%25&amp;height=100%25" alt="Image o' th' Relearrrn theme 'n light an' dark mode on phone, tablet an' desktop" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-6f0fc7970b5893fc9f479ebc7763fa78"><img src="../images/hero.png?width=100%25&amp;height=100%25" alt="Image o' th' Relearrrn theme 'n light an' dark mode on phone, tablet an' desktop" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="motivation">Motivat'n</h2>
 <p>Th' theme be a fork o' th' great <a href="https://github.com/matcornic/hugo-theme-learn" target="_blank">Learrrn theme</a> wit' th' aim o' fix'n long outstand'n bugs an' adapt'n t' latest Cap'n Hugo features. As far as poss'ble this theme tries t' be a drop-in replacement fer th' Learrrn theme.</p>
 <h2 id="features">Features</h2>
@@ -327,12 +327,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1700525734" defer></script>
-        <script src="../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../js/search.js?1700525734" defer></script>
+        <script src="../js/auto-complete.js?1700697953" defer></script>
+        <script src="../js/lunr/lunr.min.js?1700697953" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1700697953" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1700697953" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1700697953" defer></script>
+        <script src="../js/search.js?1700697953" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -422,9 +422,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -489,13 +491,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../js/github-buttons.js?1700525734"></script>
+          <script async src="../js/github-buttons.js?1700697953"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../js/theme.js?1700525734" defer></script>
+    <script src="../js/clipboard.min.js?1700697953" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1700697953" defer></script>
+    <script src="../js/theme.js?1700697953" defer></script>
   </body>
 </html>
diff --git a/pir/index.print.html b/pir/index.print.html
index 6f7aff4ce4..fe578b596b 100644
--- a/pir/index.print.html
+++ b/pir/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/index.html" rel="canonical" type="text/html" title="Cap&#39;n Hugo Relearrrn Theme">
     <link href="../pir/index.xml" rel="alternate" type="application/rss+xml" title="Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../js/url.js?1700525735"></script>
-    <script src="../js/variant.js?1700525735"></script>
+    <link href="../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../js/url.js?1700697954"></script>
+    <script src="../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -101,8 +101,8 @@
 </div>
 <p>A theme fer <a href="https://gohugo.io/" target="_blank">Cap'n Hugo</a> designed fer documentat'n.</p>
 <p><a href="../basics/migration/index.html">★ What&rsquo;s new 'n th' latest release ★</a></p>
-<p><a href="#R-image-818d64ecb153669ff09235478c06f428" class="lightbox-link"><img src="../images/hero.png?width=100%25&amp;height=100%25" alt="Image o' th' Relearrrn theme 'n light an' dark mode on phone, tablet an' desktop" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-818d64ecb153669ff09235478c06f428"><img src="../images/hero.png?width=100%25&amp;height=100%25" alt="Image o' th' Relearrrn theme 'n light an' dark mode on phone, tablet an' desktop" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-6f0fc7970b5893fc9f479ebc7763fa78" class="lightbox-link"><img src="../images/hero.png?width=100%25&amp;height=100%25" alt="Image o' th' Relearrrn theme 'n light an' dark mode on phone, tablet an' desktop" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-6f0fc7970b5893fc9f479ebc7763fa78"><img src="../images/hero.png?width=100%25&amp;height=100%25" alt="Image o' th' Relearrrn theme 'n light an' dark mode on phone, tablet an' desktop" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="motivation">Motivat'n</h2>
 <p>Th' theme be a fork o' th' great <a href="https://github.com/matcornic/hugo-theme-learn" target="_blank">Learrrn theme</a> wit' th' aim o' fix'n long outstand'n bugs an' adapt'n t' latest Cap'n Hugo features. As far as poss'ble this theme tries t' be a drop-in replacement fer th' Learrrn theme.</p>
 <h2 id="features">Features</h2>
@@ -248,8 +248,8 @@
 <p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> Th' light themes have a bit more contrast fer rrrambl'n text an' head'ns. Also th' syntaxhighlight'n was changed t' th' more colorful MonokaiLight. This br'ns th' syntaxhighlightn'n 'n sync wit' th' correspond'n dark theme variants, which be us'n Monokai.</p>
 </li>
 <li>
-<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Ye now can configure opt'ns fer every theme variant 'n yer <code>config.toml</code>. This allows fer optional <a href="../basics/branding/index.html#theme-variant-advanced">advanced functionality</a>. Ye don&rsquo;t need t' change anyth'n as th' old configurat'n opt'ns will still work (but may generate warnings now).</p>
-<p>Th' advanced functionality allows ye t' set an explicit name fer a theme variant, set different colors (if ye be us'n monochrome SVGs) or even different ay'cons (handy if ye want t' adjust colors fer PNGs, GIFs or JPGs) an' provide an extended way t' configure th' automatic switch o' variants based on yer OS sett'ns.</p>
+<p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-plus-circle"></i></span><span class="badge-content">New</span></span> Ye now can configure additional opt'ns fer every theme variant 'n yer <code>config.toml</code>. This allows fer optional <a href="../basics/branding/index.html#theme-variant-advanced">advanced functionality</a>. Ye don&rsquo;t need t' change anyth'n as th' old configurat'n opt'ns will still work (but may generate warnings now).</p>
+<p>Th' advanced functionality allows ye t' set an explicit name fer a theme variant, set different colors (if ye be us'n monochrome SVGs) or even different ay'cons (handy if ye want t' adjust colors fer PNGs, GIFs or JPGs) an' now allows fer multiple auto mode variants that adjust t' th' light/dark preference o' yer OS sett'ns.</p>
 </li>
 </ul>
 <hr>
@@ -1105,8 +1105,8 @@
 
 <p>Thanks t' th' simplicity o' Cap'n Hugo, this plank be as empty as this theme needs requirements.</p>
 <p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> o' th' <a href="https://gohugo.io/getting-started/installing/" target="_blank">Cap'n Hugo binary</a> fer yer OS (Windows, Linux, Mac).</p>
-<p><a href="#R-image-d045e1efc57f3d3fc2ba65bc67017199" class="lightbox-link"><img src="../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-d045e1efc57f3d3fc2ba65bc67017199"><img src="../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f628a90f295b9755e3a248b64e27c509" class="lightbox-link"><img src="../basics/requirements/magic.gif" alt="Magic" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f628a90f295b9755e3a248b64e27c509"><img src="../basics/requirements/magic.gif" alt="Magic" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 
             <footer class="footline">
@@ -1156,8 +1156,8 @@
 </span></span><span class="line"><span class="cl"><span class="gh"># Basics
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>
 </span></span><span class="line"><span class="cl">Discover what this Cap'n Hugo theme be all about an' th' core concepts behind it.</span></span></code></pre></div><p>renders as</p>
-<p><a href="#R-image-9d70debd2d9b8800223541c02866e0a7" class="lightbox-link"><img src="../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-9d70debd2d9b8800223541c02866e0a7"><img src="../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f74b3dba6c5b87761c9cc8bbc462deb4" class="lightbox-link"><img src="../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f74b3dba6c5b87761c9cc8bbc462deb4"><img src="../basics/installation/chapter.png?width=60pc" alt="A Chapter" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>Th' Relearrrn theme provides archetypes t' create skeletons fer yer website. Begin by creat'n yer first chapter plank wit' th' follow'n command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter basics/_index.md</span></span></code></pre></div><p>By open'n th' given file, ye should see th' property <code>chapter=true</code> on top, mean'n this plank be a <em>chapter</em>.</p>
 <p>By default all chapters an' planks be created as a draft. If ye want t' render these planks, remove th' property <code>draft: true</code> from th' metadata.</p>
@@ -1206,13 +1206,13 @@
 <p>Avast that some o' these opt'ns be explained 'n detail 'n other sections o' this documentat'n.</p>
 
   
-<div class="tab-panel" data-tab-group="3af05215a9c9c79b60a95735d81c4236">
+<div class="tab-panel" data-tab-group="33288630c8becb79f345305399fd8fa9">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('3af05215a9c9c79b60a95735d81c4236','configtoml')"
+      onclick="switchTab('33288630c8becb79f345305399fd8fa9','configtoml')"
     >
       <span class="tab-nav-text">config.toml</span>
     </button>
@@ -1287,26 +1287,20 @@
 </span></span><span class="line"><span class="cl"><span class="c"># Ye can also define yer own variants. See th' docs how this works. Also,</span>
 </span></span><span class="line"><span class="cl"><span class="c"># th' docs provide an interactive theme generator t' help ye wit' this task.</span>
 </span></span><span class="line"><span class="cl"><span class="nx">themeVariant</span> <span class="p">=</span> <span class="p">[</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;auto&#34;</span>          <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span> <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>  <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-light&#34;</span>     <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-dark&#34;</span>      <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;neon&#34;</span>          <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;learn&#34;</span>         <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;blue&#34;</span>          <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;green&#34;</span>         <span class="p">},</span>
-</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;red&#34;</span>           <span class="p">}</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-auto&#34;</span><span class="p">,</span>  <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Relearn Light/Dark&#34;</span><span class="p">,</span> <span class="nx">auto</span> <span class="p">=</span> <span class="p">[]</span> <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span>  <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>   <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-bright&#34;</span> <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-auto&#34;</span><span class="p">,</span>      <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Zen Light/Dark&#34;</span><span class="p">,</span> <span class="nx">auto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;zen-light&#34;</span><span class="p">,</span> <span class="s2">&#34;zen-dark&#34;</span> <span class="p">]</span> <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-light&#34;</span>      <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-dark&#34;</span>       <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;neon&#34;</span>           <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;learn&#34;</span>          <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;blue&#34;</span>           <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;green&#34;</span>          <span class="p">},</span>
+</span></span><span class="line"><span class="cl">	<span class="p">{</span> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;red&#34;</span>            <span class="p">}</span>
 </span></span><span class="line"><span class="cl"><span class="p">]</span>
 </span></span><span class="line"><span class="cl">
-</span></span><span class="line"><span class="cl"><span class="c"># Th' color variants used fer auto mode.</span>
-</span></span><span class="line"><span class="cl"><span class="c"># Default: [ &#34;relearn-light&#34;, &#34;relearn-dark&#34; ], overwritten by th' first</span>
-</span></span><span class="line"><span class="cl"><span class="c"># two non-auto opt'ns o' yer `themeVariant` opt'n if present.</span>
-</span></span><span class="line"><span class="cl"><span class="c"># Th' auto variant defines how yer ship adjusts t' yer selected OS sett'ns</span>
-</span></span><span class="line"><span class="cl"><span class="c"># fer light/dark mode. Th' first array element be th' variant fer light mode,</span>
-</span></span><span class="line"><span class="cl"><span class="c"># th' second fer dark mode.</span>
-</span></span><span class="line"><span class="cl"><span class="nx">themeVariantAuto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;relearn-light&#34;</span><span class="p">,</span> <span class="s2">&#34;relearn-dark&#34;</span> <span class="p">]</span>
-</span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl"><span class="c">#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span>
 </span></span><span class="line"><span class="cl"><span class="c"># General</span>
 </span></span><span class="line"><span class="cl"><span class="c"># These opt'ns be defin'n general, non visual behavior.</span>
@@ -1689,7 +1683,7 @@
 </div>
 </div>
 <h2 id="adjust-to-os-settings">Adjust t' OS Sett'ns</h2>
-<p>Ye can also cause th' ship t' adjust t' yer OS sett'ns fer light/dark mode. Just set th' <code>themeVariant</code> t' <code>auto</code>. That&rsquo;s it.</p>
+<p>Ye can also cause th' ship t' adjust t' yer OS sett'ns fer light/dark mode. Just set th' <code>themeVariant</code> t' <code>auto</code> t' become an auto mode variant. That&rsquo;s it.</p>
 <p>Ye can use th' <code>auto</code> value wit' th' single or multiple variants opt'n. If ye be us'n multiple variants, ye can drop <code>auto</code> at any posit'n 'n th' option&rsquo;s array, but usually it makes sense t' set it 'n th' first posit'n an' make it th' default.</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">themeVariant</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;auto&#34;</span><span class="p">,</span> <span class="s2">&#34;red&#34;</span> <span class="p">]</span></span></span></code></pre></div><p>If ye don&rsquo;t configure anyth'n else, th' theme will default t' use <code>relearn-light</code> fer light mode an' <code>relearn-dark</code> fer dark mode. These defaults be overwritten by th' first two non-auto opt'ns o' yer <code>themeVariant</code> opt'n if present.</p>
@@ -1746,9 +1740,33 @@
 <td>see notes</td>
 <td>Th' name t' be displayed 'n th' variant selector. If not set, th' identifier be used 'n a human read'ble form.</td>
 </tr>
+<tr>
+<td>auto</td>
+<td><em>&lt;empty&gt;</em></td>
+<td>If set, th' variant be treated as an <a href="#adjust-to-os-settings">auto mode variant</a>. It has th' same behavior as th' <code>themeVariantAuto</code> opt'n. Th' first entry 'n th' array be th' color variant fer light mode, th' second fer dark mode. Defin'n auto mode variants wit' th' advanced opt'ns has th' benefit that ye can now have multiple auto mode variants instead o' just one wit' th' simple opt'ns.</td>
+</tr>
 </tbody>
 </table>
-
+<h3 id="example-configuration-of-this-site">Example Configurat'n o' This Ship</h3>
+<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-auto&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Relearn Light/Dark&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">auto</span> <span class="p">=</span> <span class="p">[]</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-auto&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Zen Light/Dark&#34;</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">auto</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;zen-light&#34;</span><span class="p">,</span> <span class="s2">&#34;zen-dark&#34;</span> <span class="p">]</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-light&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;zen-dark&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
+</span></span><span class="line"><span class="cl">    <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;neon&#34;</span></span></span></code></pre></div>
 
             <footer class="footline">
 <div class=" taxonomy-categories term-list cstyle  " title="Categories" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
@@ -1792,8 +1810,8 @@
 <p>Ye can add a dedicated search plank fer yer plank by add'n th' <code>SEARCHPAGE</code> outputformat t' yer home plank by add'n th' follow'n lines 'n yer <code>config.toml</code> file. This will cause Cap'n Hugo t' generate a new file <code>http://example.com/mysite/search.html</code>.</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">home</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;HTML&#34;</span><span class="p">,</span> <span class="s2">&#34;RSS&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCH&#34;</span><span class="p">,</span> <span class="s2">&#34;SEARCHPAGE&#34;</span><span class="p">]</span></span></span></code></pre></div><p>Ye can access this plank by either click'n on th' magnifier glass or by typ'n some search term an' press'n <code>ENTER</code> inside o' th' menu&rsquo;s search box .</p>
-<p><a href="#R-image-a63d9f35792d51f3fe00646ffd943ccb" class="lightbox-link"><img src="../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-a63d9f35792d51f3fe00646ffd943ccb"><img src="../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-c0f4ffed1ca5905acaf2222772bc7a87" class="lightbox-link"><img src="../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-c0f4ffed1ca5905acaf2222772bc7a87"><img src="../basics/customization/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 
 <div class="box notices cstyle note">
   <div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Avast</div>
@@ -1834,8 +1852,8 @@ appearance, ye will have t' configure th' <code>landingPageName</code> fer th' d
 </span></span><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Arrr! Homme&#34;</span>
 </span></span><span class="line"><span class="cl"><span class="p">...</span></span></span></code></pre></div><p>If this opt'n be not configured fer a specific language, they will get their default values:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">landingPageName</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fas fa-home&#39;&gt;&lt;/i&gt; Home&#34;</span></span></span></code></pre></div><p>Th' home button be go'n t' look like this:</p>
-<p><a href="#R-image-4c3da87119f0d91d361a565a33670b9b" class="lightbox-link"><img src="../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-4c3da87119f0d91d361a565a33670b9b"><img src="../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-450c230643e84059105dd1a85d72aa68" class="lightbox-link"><img src="../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-450c230643e84059105dd1a85d72aa68"><img src="../basics/customization/home_button_defaults.png?width=18.75rem" alt="Default Home Button" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="social-media-meta-tags">Social Media Meta Tags</h2>
 <p>Ye can add social media meta tags fer th' <a href="https://gohugo.io/templates/internal/#open-graph" target="_blank">Open Graph</a> protocol an' <a href="https://gohugo.io/templates/internal/#twitter-cards" target="_blank">Twitter Cards</a> t' yer ship. These be configured as mentioned 'n th' Cap'n Hugo docs.</p>
 <h2 id="change-the-menu-width">Change th' Menu Width</h2>
@@ -1941,13 +1959,13 @@ appearance, ye will have t' configure th' <code>landingPageName</code> fer th' d
 <p>This interactive tool may help ye t' generate yer own color variant stylesheet.</p>
 
 <div class="expand">
-    <input type="checkbox" id="R-expand-52f0e07d7f9ed7db834823204655ceb7" aria-controls="R-expandcontent-52f0e07d7f9ed7db834823204655ceb7" >
-    <label class="expand-label" for="R-expand-52f0e07d7f9ed7db834823204655ceb7" >
+    <input type="checkbox" id="R-expand-46b7f1960b5d266a476b23f83989b416" aria-controls="R-expandcontent-46b7f1960b5d266a476b23f83989b416" >
+    <label class="expand-label" for="R-expand-46b7f1960b5d266a476b23f83989b416" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show usage instruct'ns
     </label>
-    <div id="R-expandcontent-52f0e07d7f9ed7db834823204655ceb7" class="expand-content">
+    <div id="R-expandcontent-46b7f1960b5d266a476b23f83989b416" class="expand-content">
 
 <p>T' get started, first select a color variant from th' variant selector 'n th' lower left sidebar that fits ye best as a start'n point.</p>
 <p>Th' graph be interactive an' reflect th' current colors. Ye can click on any o' th' colored boxes t' adjust th' respective color. Th' graph <strong>an' th' plank</strong> will update accordingly.</p>
@@ -2009,8 +2027,8 @@ window.variants && variants.generator( '#R-vargenerator' );
 
 
 <p>Th' theme comes wit' a reasonably configured topbar.</p>
-<p><a href="#R-image-be5110ed7098b29c554e5d4e17b81c5d" class="lightbox-link"><img src="../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-be5110ed7098b29c554e5d4e17b81c5d"><img src="../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-3bce7fccaf80d6de39267ec626cfcefe" class="lightbox-link"><img src="../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-3bce7fccaf80d6de39267ec626cfcefe"><img src="../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>Nevertheless, yer requirements may differ from this configurat'n. Luckily th' theme got ye covered as th' themebar, its buttons an' th' functionality behind these buttons be fully configur'ble by ye.</p>
 
 <div class="box notices cstyle tip">
@@ -2022,8 +2040,8 @@ window.variants && variants.generator( '#R-vargenerator' );
 </div>
 <h2 id="areas">Areas</h2>
 <p>Th' default configurat'n comes wit' three predefined areas that may contain an arbitrary set o' buttons.</p>
-<p><a href="#R-image-32288507b2090cf79d2cb98070ffc626" class="lightbox-link"><img src="../basics/topbar/topbar-areas.png" alt="Topbar wit' default areas marked" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-32288507b2090cf79d2cb98070ffc626"><img src="../basics/topbar/topbar-areas.png" alt="Topbar wit' default areas marked" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-607f48ec9861c60e9a220ae32a57752f" class="lightbox-link"><img src="../basics/topbar/topbar-areas.png" alt="Topbar wit' default areas marked" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-607f48ec9861c60e9a220ae32a57752f"><img src="../basics/topbar/topbar-areas.png" alt="Topbar wit' default areas marked" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <ul>
 <li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/start.html" target="_blank"><strong>start</strong></a>: shown between menu an' breadcrumb</li>
 <li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/end.html" target="_blank"><strong>end</strong></a>: shown on th' opposite breadcrumb side 'n comparison t' th' <em>start</em> area</li>
@@ -3775,8 +3793,8 @@ window.variants && variants.generator( '#R-vargenerator' );
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
 </span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;GitHub repo&#34;</span>
 </span></span><span class="line"><span class="cl"><span class="nx">menuPre</span> <span class="p">=</span> <span class="s2">&#34;&lt;i class=&#39;fab fa-github&#39;&gt;&lt;/i&gt; &#34;</span>
-</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#R-image-d55975adeb64483cee35d1996c0ff65f" class="lightbox-link"><img src="../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-d55975adeb64483cee35d1996c0ff65f"><img src="../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div><p><a href="#R-image-97fc5c22d2205d41a026c974f6c9ce9b" class="lightbox-link"><img src="../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-97fc5c22d2205d41a026c974f6c9ce9b"><img src="../cont/pages/frontmatter-icon.png?width=18.75rem" alt="Title wit' icon" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h3 id="ordering-sibling-menupage-entries">Order'n sibl'n menu/page entries</h3>
 <p>Cap'n Hugo provides a <a href="https://gohugo.io/content/ordering/" target="_blank">flex'ble way</a> t' handle order fer yer planks.</p>
 <p>Th' simplest way be t' set <code>weight</code> parameter t' a number.</p>
@@ -3826,8 +3844,8 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
 <h2 id="predefined-archetypes">Predefined Archetypes</h2>
 <h3 id="archetypes-home">Home</h3>
 <p>A <strong>Home</strong> plank be th' start'n plank o' yer project. It&rsquo;s best t' have only one plank o' this kind 'n yer project.</p>
-<p><a href="#R-image-c14f410863162434966b193edd277064" class="lightbox-link"><img src="../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-c14f410863162434966b193edd277064"><img src="../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-46441923928e252d61c857264dfedd40" class="lightbox-link"><img src="../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-46441923928e252d61c857264dfedd40"><img src="../cont/archetypes/pages-home.png?width=60pc" alt="Home page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>T' create a home plank, run th' follow'n command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind home _index.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -3837,8 +3855,8 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
 </span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><h3 id="archetypes-chapter">Chapter</h3>
 <p>A <strong>Chapter</strong> displays a plank meant t' be used as introduct'n fer a set o' child planks. Commonly, it contains a simple title an' a catch line t' define rrrambl'n that can be found below it.</p>
-<p><a href="#R-image-be644194dfdfa0def8629e150bcc656b" class="lightbox-link"><img src="../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-be644194dfdfa0def8629e150bcc656b"><img src="../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-c863c1e681cdebc8ce46b669181055e8" class="lightbox-link"><img src="../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-c863c1e681cdebc8ce46b669181055e8"><img src="../cont/archetypes/pages-chapter.png?width=60pc" alt="Chapter page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>T' create a chapter plank, run th' follow'n command</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new --kind chapter &lt;name&gt;/_index.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">+++
@@ -3850,8 +3868,8 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
 </span></span><span class="line"><span class="cl">Lorem Ipsum.</span></span></code></pre></div><p>Replace th' <code>X</code> wit' a number. Because this number will be used t' generate th' subtitle o' th' chapter plank, set th' number t' a consecutive value start'n at 1 fer each new chapter level.</p>
 <h3 id="archetypes-default">Default</h3>
 <p>A <strong>Default</strong> plank be any other rrrambl'n plank. If ye set an unknown archetype 'n yer frontmatter, this archetype will be used t' generate th' plank.</p>
-<p><a href="#R-image-a792fc9566ab89d544de6f97c022f91a" class="lightbox-link"><img src="../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-a792fc9566ab89d544de6f97c022f91a"><img src="../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-cd56e4278f5526b6621add3c2ffef0e2" class="lightbox-link"><img src="../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 60pc;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-cd56e4278f5526b6621add3c2ffef0e2"><img src="../cont/archetypes/pages-default.png?width=60pc" alt="Default page" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <p>T' create a default plank, run either one o' th' follow'n commands</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;/_index.md</span></span></code></pre></div><p>or</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new &lt;chapter&gt;/&lt;name&gt;.md</span></span></code></pre></div><p>This leads t' a file wit' th' follow'n rrrambl'n</p>
@@ -4425,8 +4443,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-d102233d9d0138fc5defd93c4680ad0d" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-d102233d9d0138fc5defd93c4680ad0d"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-85fc1a9b4d2346568268ce2d1bc3d503" class="lightbox-link"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-85fc1a9b4d2346568268ce2d1bc3d503"><img src="https://octodex.github.com/images/spocktocat.png?width=20vw" alt="Spock" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-with-tooltip">Image wit' Tooltip</h3>
@@ -4436,8 +4454,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-0149d024b7eddf3e0076851065ec66ea" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-0149d024b7eddf3e0076851065ec66ea"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-f2b4d6318fa7d80a87412628c990db51" class="lightbox-link"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-f2b4d6318fa7d80a87412628c990db51"><img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-references">Image References</h3>
@@ -4449,8 +4467,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-24c6bd85622f1c9d2a028015103aefed" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-24c6bd85622f1c9d2a028015103aefed"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-78cca16d14addd3a3275d3cfd60fa060" class="lightbox-link"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-78cca16d14addd3a3275d3cfd60fa060"><img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h3 id="image-effects">Image Effects</h3>
@@ -4462,8 +4480,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-2223114194645eca39dd33cdaea61bed" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-2223114194645eca39dd33cdaea61bed"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-eacbf0dcf1ae5f933a9256a5c7d42a23" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-eacbf0dcf1ae5f933a9256a5c7d42a23"><img src="https://octodex.github.com/images/minion.png?width=20vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px</span>)</span></span></code></pre></div>
@@ -4471,8 +4489,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-9a10eb837968eba2af68a5fb99d2318d" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-9a10eb837968eba2af68a5fb99d2318d"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-589e2c7f739a1d1efe3c6d7b3f1eb864" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: auto;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-589e2c7f739a1d1efe3c6d7b3f1eb864"><img src="https://octodex.github.com/images/minion.png?height=50px" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw</span>)</span></span></code></pre></div>
@@ -4480,8 +4498,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-f144f18693f874586254788d12f7a960" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-f144f18693f874586254788d12f7a960"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-791529c748fe4fc18df9a5d515c3b81a" class="lightbox-link"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="figure-image bg-white border lightbox noshadow" style="height: 50px; width: 40vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-791529c748fe4fc18df9a5d515c3b81a"><img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw" alt="Minion" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="css-classes">CSS Classes</h4>
@@ -4492,8 +4510,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-4c562bdaaa198cd2d4f240ae13f526fa" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-4c562bdaaa198cd2d4f240ae13f526fa"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
+<p><a href="#R-image-72fe9333ba11e382e7868b886b95f79d" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="figure-image bg-white border lightbox noborder shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-72fe9333ba11e382e7868b886b95f79d"><img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,noborder" alt="Spidertocat" class="lightbox-image bg-white border lightbox noborder shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="border">Border</h5>
@@ -4502,8 +4520,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-7bb457a3fe1a41c4dfc7246e39f6dd80" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-7bb457a3fe1a41c4dfc7246e39f6dd80"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-4fdcd64acf6a54e44ca2d2c2469f2b1d" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="figure-image bg-white border lightbox noshadow noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-4fdcd64acf6a54e44ca2d2c2469f2b1d"><img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border,noshadow" alt="DrOctocat" class="lightbox-image bg-white border lightbox noshadow noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="left">Left</h5>
@@ -4512,8 +4530,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-7436a54f9c59716107e47564d63f6b0d" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-7436a54f9c59716107e47564d63f6b0d"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-198eb52d0f58ff53e79cf9ab552468ad" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="figure-image bg-white border left lightbox noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-198eb52d0f58ff53e79cf9ab552468ad"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image bg-white border left lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="right">Right</h5>
@@ -4522,8 +4540,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-487c627580865b87b59508c8a360259d" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-487c627580865b87b59508c8a360259d"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-92fc6ad4cc09eab62d67c76f1352df5d" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="figure-image bg-white border lightbox right noshadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-92fc6ad4cc09eab62d67c76f1352df5d"><img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image bg-white border lightbox right noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="inline">Inline</h5>
@@ -4535,14 +4553,14 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-bf95befaadcfae5ee9010e8c25ff246b" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-bf95befaadcfae5ee9010e8c25ff246b"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#R-image-caced1efa234c5acf8e46d760abd6b66" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-caced1efa234c5acf8e46d760abd6b66"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#R-image-f57681a0ea4f6b1098292011381e9a16" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-f57681a0ea4f6b1098292011381e9a16"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
-<a href="#R-image-25a8043a9474efa9d41f8b465fae49f0" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-25a8043a9474efa9d41f8b465fae49f0"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-c540afb7e4bbab459fc34f1f86733ba0" class="lightbox-link"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-c540afb7e4bbab459fc34f1f86733ba0"><img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline" alt="Spidertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#R-image-2115589c6288d24e0f9e970d345860c2" class="lightbox-link"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-2115589c6288d24e0f9e970d345860c2"><img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#R-image-d6903e3814c786575c4a8a069e8fdd76" class="lightbox-link"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-d6903e3814c786575c4a8a069e8fdd76"><img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a>
+<a href="#R-image-90792f669c703a3064bec8a98401cf4c" class="lightbox-link"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="figure-image bg-white border inline lightbox noshadow" style="height: auto; width: 10vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-90792f669c703a3064bec8a98401cf4c"><img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image bg-white border inline lightbox noshadow" loading="lazy"></a></p>
 </div>
 </div>
 <h5 id="combination">Combinat'n</h5>
@@ -4551,8 +4569,8 @@ line 3 o' code
   <div class="box-label"><i class="fa-fw fas fa-eye"></i> Result</div>
   <div class="box-content">
 
-<p><a href="#R-image-daa7c7ad08de77f69a3a46d057a715f4" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-daa7c7ad08de77f69a3a46d057a715f4"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
+<p><a href="#R-image-802a04f070edc67bba8f6d31a6bcf722" class="lightbox-link"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="figure-image bg-white border left lightbox shadow" style="height: auto; width: 20vw;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-802a04f070edc67bba8f6d31a6bcf722"><img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image bg-white border left lightbox shadow" loading="lazy"></a></p>
 </div>
 </div>
 <h4 id="lightbox">Lightbox</h4>
@@ -4593,13 +4611,13 @@ line 3 o' code
 <p>Without any sett'ns 'n yer <code>config.toml</code> this defaults t'</p>
 
   
-<div class="tab-panel" data-tab-group="a6666e486004a00c00c1ff56e3a314b4">
+<div class="tab-panel" data-tab-group="687b5bf0ca2c3e5f69a48ae21286a3ca">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('a6666e486004a00c00c1ff56e3a314b4','configtoml')"
+      onclick="switchTab('687b5bf0ca2c3e5f69a48ae21286a3ca','configtoml')"
     >
       <span class="tab-nav-text">config.toml</span>
     </button>
@@ -4620,13 +4638,13 @@ line 3 o' code
 </div><p>This can be overridden 'n a planks frontmatter by eg.</p>
 
   
-<div class="tab-panel" data-tab-group="36633fc15468f31c9b7cdcbd168d37a9">
+<div class="tab-panel" data-tab-group="300a0f4624ca8d9697ccdd8eb947e7e4">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="frontmatter"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('36633fc15468f31c9b7cdcbd168d37a9','frontmatter')"
+      onclick="switchTab('300a0f4624ca8d9697ccdd8eb947e7e4','frontmatter')"
     >
       <span class="tab-nav-text">frontmatter</span>
     </button>
@@ -4646,13 +4664,13 @@ line 3 o' code
 </div><p>Or by explicitly override sett'ns by URL query parameter</p>
 
   
-<div class="tab-panel" data-tab-group="9306f0464897ba5c9a68ae4011b439c5">
+<div class="tab-panel" data-tab-group="cf4ff04f764ab6750053b7735d1b8a7e">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="url"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('9306f0464897ba5c9a68ae4011b439c5','url')"
+      onclick="switchTab('cf4ff04f764ab6750053b7735d1b8a7e','url')"
     >
       <span class="tab-nav-text">URL</span>
     </button>
@@ -4669,13 +4687,13 @@ line 3 o' code
 </div><p>Th' sett'ns applied t' th' above image would be</p>
 
   
-<div class="tab-panel" data-tab-group="3a90fec70d384e04812a109a67d8ff8b">
+<div class="tab-panel" data-tab-group="dee7cf005be7771af2cbd980fbb6069b">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="result"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('3a90fec70d384e04812a109a67d8ff8b','result')"
+      onclick="switchTab('dee7cf005be7771af2cbd980fbb6069b','result')"
     >
       <span class="tab-nav-text">Result</span>
     </button>
@@ -4695,13 +4713,13 @@ line 3 o' code
 </div><p>This ends up 'n th' follow'n HTML whar' th' parameter be converted t' CSS classes.</p>
 
   
-<div class="tab-panel" data-tab-group="1d6f6b9464e10ce2bf2136199fc86a6b">
+<div class="tab-panel" data-tab-group="c8de0f9bbbdbd7eecb37085a7d5b682e">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="html"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('1d6f6b9464e10ce2bf2136199fc86a6b','html')"
+      onclick="switchTab('c8de0f9bbbdbd7eecb37085a7d5b682e','html')"
     >
       <span class="tab-nav-text">HTML</span>
     </button>
@@ -4880,8 +4898,8 @@ However, if ye want t' keep th' title but change its value, it can be overridden
 <li>Automatic menu generat'n from multilingual rrrambl'n</li>
 <li>In-browser language switch'n</li>
 </ul>
-<p><a href="#R-image-70394f4d09f0a65864ad157665d1d8cc" class="lightbox-link"><img src="../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-70394f4d09f0a65864ad157665d1d8cc"><img src="../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
+<p><a href="#R-image-37ad4e7f4a5443e2ead5a0b13db76d81" class="lightbox-link"><img src="../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: 18.75rem;" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-37ad4e7f4a5443e2ead5a0b13db76d81"><img src="../cont/i18n/i18n-menu.gif?width=18.75rem" alt="I18n menu" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
 <h2 id="basic-configuration">Basic configurat'n</h2>
 <p>Aft learn'n <a href="https://gohugo.io/content-management/multilingual" target="_blank">how Cap'n Hugo handle multilingual websites</a>, define yer languages 'n yer <code>config.toml</code> file.</p>
 <p>For example wit' current English an' Piratized English website.</p>
@@ -6338,13 +6356,13 @@ So its rrrambl'n be used as descript'n.</p>
 <p>Th' <code>expand</code> shortcode displays an expandable/collaps'ble section o' text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="R-expand-85c5fd439b91c0001c52f7c5e8f98a3e" aria-controls="R-expandcontent-85c5fd439b91c0001c52f7c5e8f98a3e" >
-    <label class="expand-label" for="R-expand-85c5fd439b91c0001c52f7c5e8f98a3e" >
+    <input type="checkbox" id="R-expand-2d69097a91a09754069126b790aaffe5" aria-controls="R-expandcontent-2d69097a91a09754069126b790aaffe5" >
+    <label class="expand-label" for="R-expand-2d69097a91a09754069126b790aaffe5" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="R-expandcontent-85c5fd439b91c0001c52f7c5e8f98a3e" class="expand-content">
+    <div id="R-expandcontent-2d69097a91a09754069126b790aaffe5" class="expand-content">
 
 <p>Thank ye!</p>
 <p>That&rsquo;s some text wit' a footnote<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
@@ -6462,26 +6480,26 @@ So its rrrambl'n be used as descript'n.</p>
 <h3 id="all-defaults">All Defaults</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">ye</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="R-expand-54008516006ee9d5c2efc7092b8970d9" aria-controls="R-expandcontent-54008516006ee9d5c2efc7092b8970d9" >
-    <label class="expand-label" for="R-expand-54008516006ee9d5c2efc7092b8970d9" >
+    <input type="checkbox" id="R-expand-a6a8b1032d39ea4f2790c8bb1162cc61" aria-controls="R-expandcontent-a6a8b1032d39ea4f2790c8bb1162cc61" >
+    <label class="expand-label" for="R-expand-a6a8b1032d39ea4f2790c8bb1162cc61" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="R-expandcontent-54008516006ee9d5c2efc7092b8970d9" class="expand-content">
+    <div id="R-expandcontent-a6a8b1032d39ea4f2790c8bb1162cc61" class="expand-content">
 <p>
 Yes, ye did it!</div>
 </div>
 <h3 id="initially-expanded">Initially Expanded</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">t'</span> <span class="nx">press</span> <span class="nx">ye</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="R-expand-f476fd22f2aaeb91c49d8dc35761798f" aria-controls="R-expandcontent-f476fd22f2aaeb91c49d8dc35761798f"  checked>
-    <label class="expand-label" for="R-expand-f476fd22f2aaeb91c49d8dc35761798f" >
+    <input type="checkbox" id="R-expand-15f55032a4c084e63cd31f6e0813c4ba" aria-controls="R-expandcontent-15f55032a4c084e63cd31f6e0813c4ba"  checked>
+    <label class="expand-label" for="R-expand-15f55032a4c084e63cd31f6e0813c4ba" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="R-expandcontent-f476fd22f2aaeb91c49d8dc35761798f" class="expand-content">
+    <div id="R-expandcontent-15f55032a4c084e63cd31f6e0813c4ba" class="expand-content">
 <p>
 No need t' press ye!</div>
 </div>
@@ -6502,13 +6520,13 @@ No need t' press ye!</div>
 </span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">th'</span> <span class="nx">possibilities</span> <span class="nx">be</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">includ'n</span> <span class="nx">other</span> <span class="nx">shorrrtcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="R-expand-1cb8a376717ce8a146f71d163734b31f" aria-controls="R-expandcontent-1cb8a376717ce8a146f71d163734b31f" >
-    <label class="expand-label" for="R-expand-1cb8a376717ce8a146f71d163734b31f" >
+    <input type="checkbox" id="R-expand-01eaa0a7a73c0f942b36e49746bdff48" aria-controls="R-expandcontent-01eaa0a7a73c0f942b36e49746bdff48" >
+    <label class="expand-label" for="R-expand-01eaa0a7a73c0f942b36e49746bdff48" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show me almost <strong>endless</strong> possibilities
     </label>
-    <div id="R-expandcontent-1cb8a376717ce8a146f71d163734b31f" class="expand-content">
+    <div id="R-expandcontent-01eaa0a7a73c0f942b36e49746bdff48" class="expand-content">
 
 <p>Ye can add standard markdown rules:</p>
 <ul>
@@ -6545,13 +6563,13 @@ No need t' press ye!</div>
 <p>Th' <code>highlight</code> shortcode renders yer code wit' a rules highlighter.</p>
 
   
-<div class="tab-panel" data-tab-group="459682fd61d8d1248252c3168342ecb9">
+<div class="tab-panel" data-tab-group="0e0e0628e585b1a16960ff137d1d2a1e">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('459682fd61d8d1248252c3168342ecb9','python')"
+      onclick="switchTab('0e0e0628e585b1a16960ff137d1d2a1e','python')"
     >
       <span class="tab-nav-text">python</span>
     </button>
@@ -6763,13 +6781,13 @@ No need t' press ye!</div>
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>print(&#34;Hello World!&#34;)
 </span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
   
-<div class="tab-panel" data-tab-group="289e3afb743fa42d3841f222470a6ba3">
+<div class="tab-panel" data-tab-group="7b3428bb5c0972704dce47bef5cc0c12">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('289e3afb743fa42d3841f222470a6ba3','python')"
+      onclick="switchTab('7b3428bb5c0972704dce47bef5cc0c12','python')"
     >
       <span class="tab-nav-text">python</span>
     </button>
@@ -8291,7 +8309,7 @@ xychart-beta
 <div class="sc-openapi-wrapper is-load'n helper-loading-container">
   <div
     class="sc-openapi-container"
-    id="R-openapi-3c6d6fef1f208635634dddcbaf9ac09e"
+    id="R-openapi-f4e638418ab761fa8da5d3a2ecd1dc60"
     data-openapi-url="../shortcodes/openapi/petstore.json"
   ></div>
 </div>
@@ -8389,13 +8407,13 @@ xychart-beta
 <p>T' use formatted parameter, add this 'n yer <code>config.toml</code>:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">marrrkup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">renderer</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">    <span class="nx">unsafe</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="d220d910840835e19afe01bfb277eed4">
+<div class="tab-panel" data-tab-group="ff289140590609a34cc0a3abafb2b2a7">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('d220d910840835e19afe01bfb277eed4','configtoml')"
+      onclick="switchTab('ff289140590609a34cc0a3abafb2b2a7','configtoml')"
     >
       <span class="tab-nav-text">config.toml</span>
     </button>
@@ -8429,13 +8447,13 @@ xychart-beta
 <p>This be especially useful if ye want t' flag yer code example wit' an explicit language.</p>
 <p>If ye want multiple tabs grouped together ye can wrap yer tabs into th' <a href="../shortcodes/tabs/index.html"><code>tabs</code> shortcode</a>.</p>
 
-<div class="tab-panel" data-tab-group="db79a05e1d2a03c9bcf0bb49016361f2">
+<div class="tab-panel" data-tab-group="6fc04c8064a10370abdf9eb3a60166dd">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('db79a05e1d2a03c9bcf0bb49016361f2','c')"
+      onclick="switchTab('6fc04c8064a10370abdf9eb3a60166dd','c')"
     >
       <span class="tab-nav-text">c</span>
     </button>
@@ -8540,13 +8558,13 @@ xychart-beta
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="3c0f0bee5f99f3d16c75c794502c5484">
+<div class="tab-panel" data-tab-group="24da9486f5802e867bf1a821ff05dd5b">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="code"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('3c0f0bee5f99f3d16c75c794502c5484','code')"
+      onclick="switchTab('24da9486f5802e867bf1a821ff05dd5b','code')"
     >
       <span class="tab-nav-text">Code</span>
     </button>
@@ -8568,13 +8586,13 @@ xychart-beta
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="abb39aef556dce2260423c72cff1b992">
+<div class="tab-panel" data-tab-group="4685c4f85344783efeaea4fa574e8232">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="mixed"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('abb39aef556dce2260423c72cff1b992','mixed')"
+      onclick="switchTab('4685c4f85344783efeaea4fa574e8232','mixed')"
     >
       <span class="tab-nav-text"><em><strong>Mixed</strong></em></span>
     </button>
@@ -8619,41 +8637,41 @@ xychart-beta
 </span></span><span class="line"><span class="cl"><span class="nx">This</span> <span class="nx">will</span> <span class="nx">set</span> <span class="nx">th'</span> <span class="nx">background</span> <span class="nx">t'</span> <span class="nx">a</span> <span class="nx">lighter</span> <span class="nx">version</span> <span class="nx">o'</span> <span class="nx">th'</span> <span class="nx">chosen</span> <span class="nx">CSS</span> <span class="nx">color</span> <span class="nx">value</span> <span class="nx">an'</span> <span class="nx">also</span> <span class="nx">affects</span> <span class="nx">th'</span> <span class="nx">chosen</span> <span class="nx">ay'con</span><span class="p">.</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">&gt;}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="759cbcfcb44ab155fbc92025e3f78f2e">
+<div class="tab-panel" data-tab-group="3aea1cf40fbcded731d09141fd28cdd6">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="just-colored-style"
       class="tab-nav-button tab-panel-style cstyle blue active" tabindex="-1"
-      onclick="switchTab('759cbcfcb44ab155fbc92025e3f78f2e','just-colored-style')"
+      onclick="switchTab('3aea1cf40fbcded731d09141fd28cdd6','just-colored-style')"
     >
       <span class="tab-nav-text">just colored style</span>
     </button>
     <button
       data-tab-item="just-color"
       class="tab-nav-button tab-panel-style cstyle filled" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('759cbcfcb44ab155fbc92025e3f78f2e','just-color')"
+      onclick="switchTab('3aea1cf40fbcded731d09141fd28cdd6','just-color')"
     >
       <span class="tab-nav-text">just color</span>
     </button>
     <button
       data-tab-item="default-style-and-color"
       class="tab-nav-button tab-panel-style cstyle default" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('759cbcfcb44ab155fbc92025e3f78f2e','default-style-and-color')"
+      onclick="switchTab('3aea1cf40fbcded731d09141fd28cdd6','default-style-and-color')"
     >
       <span class="tab-nav-text">default style an' color</span>
     </button>
     <button
       data-tab-item="just-severity-stylefa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info"
-      onclick="switchTab('759cbcfcb44ab155fbc92025e3f78f2e','just-severity-stylefa-fw-fas-fa-info-circle')"
+      onclick="switchTab('3aea1cf40fbcded731d09141fd28cdd6','just-severity-stylefa-fw-fas-fa-info-circle')"
     >
       <span class="tab-nav-text"><i class="fa-fw fas fa-info-circle"></i> just severity style</span>
     </button>
     <button
       data-tab-item="severity-style-and-colorfa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('759cbcfcb44ab155fbc92025e3f78f2e','severity-style-and-colorfa-fw-fas-fa-info-circle')"
+      onclick="switchTab('3aea1cf40fbcded731d09141fd28cdd6','severity-style-and-colorfa-fw-fas-fa-info-circle')"
     >
       <span class="tab-nav-text"><i class="fa-fw fas fa-info-circle"></i> severity style an' color</span>
     </button>
@@ -8722,27 +8740,27 @@ xychart-beta
 <p>This comes 'n handy eg. fer provid'n code snippets fer multiple languages.</p>
 <p>If ye just want a single tab ye can instead call th' <a href="../shortcodes/tab/index.html"><code>tab</code> shortcode</a> standalone.</p>
 
-<div class="tab-panel" data-tab-group="b076e63052eb8762a626938dac700e3d">
+<div class="tab-panel" data-tab-group="5b446ca8c1023a43b49614aaf3ed17d3">
   <div class="tab-nav">
     <div class="tab-nav-title">hello.</div>
     <button
       data-tab-item="py"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('b076e63052eb8762a626938dac700e3d','py')"
+      onclick="switchTab('5b446ca8c1023a43b49614aaf3ed17d3','py')"
     >
       <span class="tab-nav-text">py</span>
     </button>
     <button
       data-tab-item="sh"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('b076e63052eb8762a626938dac700e3d','sh')"
+      onclick="switchTab('5b446ca8c1023a43b49614aaf3ed17d3','sh')"
     >
       <span class="tab-nav-text">sh</span>
     </button>
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('b076e63052eb8762a626938dac700e3d','c')"
+      onclick="switchTab('5b446ca8c1023a43b49614aaf3ed17d3','c')"
     >
       <span class="tab-nav-text">c</span>
     </button>
@@ -8890,27 +8908,27 @@ xychart-beta
 <p>See what happens t' th' tab views while ye select different tabs.</p>
 <p>While press'n a tab o' Group A switches all tab views o' Group A 'n sync (if th' tab be available), th' tabs o' Group B be left untouched.</p>
 
-<div class="tab-panel" data-tab-group="06f0071caaab08061eb93f197af4ef3b">
+<div class="tab-panel" data-tab-group="4f448d50c3aaf13463c335f4d67f7387">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="group-a-tab-view-1"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('06f0071caaab08061eb93f197af4ef3b','group-a-tab-view-1')"
+      onclick="switchTab('4f448d50c3aaf13463c335f4d67f7387','group-a-tab-view-1')"
     >
       <span class="tab-nav-text">Group A, Tab View 1</span>
     </button>
     <button
       data-tab-item="group-a-tab-view-2"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('06f0071caaab08061eb93f197af4ef3b','group-a-tab-view-2')"
+      onclick="switchTab('4f448d50c3aaf13463c335f4d67f7387','group-a-tab-view-2')"
     >
       <span class="tab-nav-text">Group A, Tab View 2</span>
     </button>
     <button
       data-tab-item="group-b"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('06f0071caaab08061eb93f197af4ef3b','group-b')"
+      onclick="switchTab('4f448d50c3aaf13463c335f4d67f7387','group-b')"
     >
       <span class="tab-nav-text">Group B</span>
     </button>
@@ -9268,8 +9286,8 @@ xychart-beta
         </div>
       </main>
     </div>
-    <script src="../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1700525735" defer></script>
+    <script src="../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1700697954" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -9298,27 +9316,27 @@ xychart-beta
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="../js/mathjax/tex-mml-chtml.js?1700525735"></script>
-    <script src="../js/d3/d3-color.min.js?1700525735" defer></script>
-    <script src="../js/d3/d3-dispatch.min.js?1700525735" defer></script>
-    <script src="../js/d3/d3-drag.min.js?1700525735" defer></script>
-    <script src="../js/d3/d3-ease.min.js?1700525735" defer></script>
-    <script src="../js/d3/d3-interpolate.min.js?1700525735" defer></script>
-    <script src="../js/d3/d3-selection.min.js?1700525735" defer></script>
-    <script src="../js/d3/d3-timer.min.js?1700525735" defer></script>
-    <script src="../js/d3/d3-transition.min.js?1700525735" defer></script>
-    <script src="../js/d3/d3-zoom.min.js?1700525735" defer></script>
-    <script src="../js/js-yaml.min.js?1700525735" defer></script>
-    <script src="../js/mermaid.min.js?1700525735" defer></script>
+    <script id="MathJax-script" async src="../js/mathjax/tex-mml-chtml.js?1700697954"></script>
+    <script src="../js/d3/d3-color.min.js?1700697954" defer></script>
+    <script src="../js/d3/d3-dispatch.min.js?1700697954" defer></script>
+    <script src="../js/d3/d3-drag.min.js?1700697954" defer></script>
+    <script src="../js/d3/d3-ease.min.js?1700697954" defer></script>
+    <script src="../js/d3/d3-interpolate.min.js?1700697954" defer></script>
+    <script src="../js/d3/d3-selection.min.js?1700697954" defer></script>
+    <script src="../js/d3/d3-timer.min.js?1700697954" defer></script>
+    <script src="../js/d3/d3-transition.min.js?1700697954" defer></script>
+    <script src="../js/d3/d3-zoom.min.js?1700697954" defer></script>
+    <script src="../js/js-yaml.min.js?1700697954" defer></script>
+    <script src="../js/mermaid.min.js?1700697954" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
     <script>window.noZensmooth = true;</script>
-    <script src="../js/swagger-ui/swagger-ui-bundle.js?1700525735" defer></script>
-    <script src="../js/swagger-ui/swagger-ui-standalone-preset.js?1700525735" defer></script>
+    <script src="../js/swagger-ui/swagger-ui-bundle.js?1700697954" defer></script>
+    <script src="../js/swagger-ui/swagger-ui-standalone-preset.js?1700697954" defer></script>
     <script>
-      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1700525735", assetsBuster:  1700525735  };
+      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1700697954", assetsBuster:  1700697954  };
     </script>
-    <script src="../js/theme.js?1700525735" defer></script>
+    <script src="../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/index.search.js b/pir/index.search.js
index 016d50d9d5..e30c755c07 100644
--- a/pir/index.search.js
+++ b/pir/index.search.js
@@ -43,7 +43,7 @@ var relearn_search_index = [
   },
   {
     "breadcrumb": "Basics",
-    "content": " Arrr! Pirrrates Fello' pirrrates, grog made us dizzy! Be awarrre some stuff may look weird in this trrranslat'n. Like Merrrmaids, do'n math or chemistrrry and stuff.\nThis document shows ye what’s new 'n th' latest release an' flags it wit' one o' th' follow'n badges. For a detailed list o' changes, see th' history plank.\n0.95.0 Th' minimum required Cap'n Hugo version.\nBreak'n A change that requires act'n by ye after upgrad'n t' assure th' ship be still functional.\nChange A change 'n default behavior that may requires act'n by ye if ye want t' revert it.\nNew Marks new behavior ye might find interest'n or comes configur'ble.\n5.24.0.beta Change Th' light themes have a bit more contrast fer rrrambl'n text an' head'ns. Also th' syntaxhighlight'n was changed t' th' more colorful MonokaiLight. This br'ns th' syntaxhighlightn'n 'n sync wit' th' correspond'n dark theme variants, which be us'n Monokai.\nNew Ye now can configure opt'ns fer every theme variant 'n yer config.toml. This allows fer optional advanced functionality. Ye don’t need t' change anyth'n as th' old configurat'n opt'ns will still work (but may generate warnings now).\nTh' advanced functionality allows ye t' set an explicit name fer a theme variant, set different colors (if ye be us'n monochrome SVGs) or even different ay'cons (handy if ye want t' adjust colors fer PNGs, GIFs or JPGs) an' provide an extended way t' configure th' automatic switch o' variants based on yer OS sett'ns.\n5.23.0 (2023-11-03) Change Wit' 0.120.0 th' author sett'ns move into th' [params] array 'n yer config.toml. Because this collides wit' th' previous way, th' theme expected author informat'n, it now adheres t' Cap'n Hugo standards an' prints out a warning dur'n built if someth'n be wrong.\nChange yer previous sett'n from\n[params] author = \"Hugo\"t'\n[params] author.name = \"Hugo\" Change Taxonomy term planks now add th' breadcrumb fer each listed plank. If this gets too crowded fer ye, ye can turn th' breadcrumbs off 'n yer config.toml by add'n disableTermBreadcrumbs=true.\nNew Taxonomy an' term planks be now allowed t' contain rrrambl'n. This be added inbetween th' title an' th' plank list.\nNew It be now poss'ble t' print custom taxonomies anywhere 'n yer plank. See th' docs.\nNew It be now poss'ble t' adjust th' menu width fer yer whole ship. See th' docs.\nNew This release adds social media meta tags fer th' Open Graph protocol an' Twitter Cards t' yer ship. See th' docs.\nNew This release comes wit' additional sort opt'ns fer th' menu an' th' children shortcode. Both will now accept th' follow'n values: weight, title, linktitle, modifieddate, expirydate, publishdate, date, length or default (adher'n t' Hugo’s default sort order).\nNew Th' theme now provides a mechanism t' board further JavaScript dependencies defined by ye only if it be needed. This comes 'n handy if ye want t' add own shorrrtcodes that depend on additional JavaScript code t' be boarded. See th' docs.\nNew Th' theme has updated its Merrrmaid dependency t' 10.6.0. This adds support fer th' xychart type.\nNew This release adds port'ble Marrrkdown links.\nPreviously it was not poss'ble t' use pure Marrrkdown links 'n a configurat'n independend way t' link t' planks inside o' yer project. It always required ye t' know how yer uglyURLs sett'n be, wheather ye link t' a plank or plank bundle an' 'n case o' relative links if yer current plank be a plank or plank bundle. (eg. [generator](generator/index.html) vs. [generator](generator.html)). This be a hassle as ye have t' change these links manually once ye change yer uglyURLs sett'n or change th' type o' a plank.\nYe could work around this by us'n th' relref shortcode (eg [generator]({{% relref \"../generator\" %}})) which works but results 'n non-port'ble Marrrkdown.\nNow it’s poss'ble t' use th' same path o' a call t' relref 'n a plain Marrrkdown link (eg [generator](../generator)). This be independend o' any configurat'n sett'ns or th' plank types involved 'n link'n. Avast, that this requires yer links t' be given without any extension, so [generator](generator/index.html) will work as before.\nTh' follow'n types o' link'n be supported:\nlink descript'n [generator](en/basics/generator) absolute from yer project root (multilang) [generator](/en/basics/generator) absolute from yer project root (multilang) [generator](basics/generator) absolute from yer current language root [generator](/basics/generator) absolute from yer current language root [generator](./../generator) relative from th' current plank [generator](../generator) relative from th' current plank 5.22.0 (2023-10-02) Change This release fixes an issue whar' 'n unfortunate condit'ns DOM ids generated by Cap'n Hugo may collide wit' DOM ids set by th' theme. T' avoid this, all theme DOM ids be now prefixed wit' R-.\nIf ye haven’t modified anyth'n, everyth'n be fine. Otherwise ye have t' check yer custom CSS rules an' JavaScript code.\nChange Ye can now have structural sections 'n th' hierarchical menu without generat'n a plank fer it.\nThis can come 'n handy, if rrrambl'n fer such a section plank doesn’t make much sense t' ye. See th' documentat'n fer how t' do this.\nThis feature may require ye t' make changes t' yer exist'n installat'n if ye be already us'n shortcuts t' planks inside o' yer project wit' a headless branch parent.\nIn this case it be advised t' remove th' title from th' headless branch parent’s frontmatter, as it will otherwise appear 'n yer breadcrumbs.\nNew It be now poss'ble t' overwrite th' sett'n fer collapsibleMenu o' yer config.toml inside o' a page’s frontmatter.\nNew If a Merrrmaid graph be zoom'ble a button t' reset th' view be now added t' th' upper right corner. Th' button be only shown once th' mouse be moved over th' graph.\nNew It be now poss'ble t' remove th' root breadcrumb by sett'n disableRootBreadcrumb=true 'n yer config.toml.\nNew Th' output o' th' dedicated search plank now displays th' result’s breadcrumb.\nNew T'ble rows now change their background color on every even row.\nNew Translat'n into Swahili. This language be not supported fer search.\n5.21.0 (2023-09-18) Change We made changes t' th' menu footer t' improve alignment wit' th' menu items 'n most cases. Care was taken not t' break yer exist'n overwritten footer. Anyways, if ye have yer menu-footer.html partial overridden, ye may want t' review th' styl'n (eg. margins/paddings) o' yer partial.\nNew This release comes wit' an awesome new feature, that allows ye t' cust'mize yer topbar buttons, change behavior, reorder them or define entirely new ones, unique t' yer installat'n. See th' documentat'n fer further details.\nNew Th' theme has updated its Swagger dependency t' 5.7.2 fer th' openapi shortcode. This br'ns support fer OpenAPI Specificat'n 3.1.\n5.20.0 (2023-08-26) Change Th' theme has updated its Swagger dependency t' 5.4.1 fer th' openapi shortcode.\nWit' this comes a change 'n th' light theme variants o' Relearrrn Bright, Relearrrn Light an' Zen Light by switch'n th' syntaxhighlightn'n inside o' openapi t' a light scheme. This br'ns it more 'n sync wit' th' code style used by th' theme variants itself.\nAdditionally, th' syntaxhighlightn'n inside o' openapi fer print'n was switched t' a light scheme fer all theme variants.\nIf ye dislike this change, ye can revert this 'n yer theme variants CSS by add'n\n--OPENAPI-CODE-theme: obsidian; --PRINT-OPENAPI-CODE-theme: obsidian; Change For consistency reasons, we renamed th' CSS vari'ble --MENU-SECTION-HR-color t' --MENU-SECTION-SEPARATOR-color. Ye don’t need t' change anyth'n 'n yer custom color stylesheet as th' old name will be used as a fallback.\nNew Th' theme variants Zen Light an' Zen Dark now add more contrast between menu, topbar an' rrrambl'n by add'n thin borders.\nThose borders be now configur'ble by us'n th' CSS variables --MAIN-TOPBAR-BORDER-color, --MENU-BORDER-color, --MENU-TOPBAR-BORDER-color, --MENU-TOPBAR-SEPARATOR-color, --MENU-HEADER-SEPARATOR-color an' --MENU-SECTION-ACTIVE-CATEGORY-BORDER-color.\nFor exist'n variants noth'n has changed visually.\nNew Th' default values fer th' image effects be now configur'ble fer yer whole ship via config.toml or fer each plank thru frontmatter.\nNew This release fixes a long outstand'n bug whar' Merrrmaid graphs could not be displayed if they were initially hidden - like 'n collapsed expand or inactive tabs.\nNew Restored compatibility wit' Cap'n Hugo versions lower than 0.111.0 fer th' highlight shortcode. This does not change th' minimum required Cap'n Hugo version.\n5.19.0 (2023-08-12) New Th' highlight shortcode now accepts th' new parameter title. This displays th' code like a single tab. This be also avail'ble us'n codefences an' makes it much easier t' write nicer code samples.\nNew Th' theme has added two new color variants zen-light an' zen-dark. Check it out!\nNew Th' theme now dispatches th' custom event themeVariantLoaded on th' document when th' variant be fully boarded either initially or by switch'n th' variant manually wit' th' variant selector.\nNew Th' theme has updated its Merrrmaid dependency t' 10.3.1. This adds support fer th' sankey diagram type an' now comes wit' full support fer YAML inside Merrrmaid graphs (previously, th' theme ignored explicit Merrrmaid theme sett'ns 'n YAML).\nNew Translat'n into Hungarian.\n5.18.0 (2023-07-27) Change Th' theme adds additional warnings fer deprecated or now unsupported features.\nChange There be visual improvements 'n display'n text links 'n yer rrrambl'n aswell as t' some other click'ble areas 'n th' theme. If you’ve overwritten some theme styles 'n yer own CSS, keep this 'n mind.\nNew Restored compatibility wit' Cap'n Hugo 0.95.0 or higher. This does not change th' minimum required Cap'n Hugo version.\nNew Th' siteparam shortcode be now cap'ble 'n display'n nested params aswell as support'n text formatt'n.\n5.17.0 (2023-06-22) Change Th' default behavior fer th' copy-to-clipboard feature fer code blocks has changed.\nTh' copy-to-clipboard button fer code blocks will now only be displayed if th' reader hovers th' code block.\nIf ye dislike this new behavior ye can turn it off an' revert t' th' old behavior by add'n [params] disableHoverBlockCopyToClipBoard=true t' yer config.toml.\nNew Restored compatibility wit' Cap'n Hugo 0.114.0 or higher. This does not change th' minimum required Cap'n Hugo version.\nNew Th' new highlight shortcode replaces Hugo’s default implementat'n an' be fully compat'ble. So ye don’t need t' change anyth'n.\nIn addit'n it offers some extensions. Currently only th' wrap extension opt'n be provided t' control whether a code block should be wrapped or scrolled if t' long t' fit.\n5.16.0 (2023-06-10) Change Th' theme now provides warnings fer deprecated or now unsupported features. Th' warnings include hints how t' fix them an' an additional link t' th' documenat'n.\nDEPRECATION warnings mark features that still work but may be removed 'n th' future.\nUNSUPPORTED warnings mark features that will not work anymore.\nChange Th' 404 error plank was revamped. Hopefully ye will not see this very often.\nNew Th' tabs shortcode an' th' tab shortcode received some love an' now align wit' their style, color, title an' ay'con parameter t' th' other shorrrtcodes.\nTh' visuals be now slightly different compared t' previous versions. Most note'ble, if ye now display a single code block 'n a tab, its default styl'n will adapt t' that o' a code block but wit' a tab handle at th' top.\nAdditionally th' name parameter was renamed t' title but ye don’t need t' change anyth'n yet as th' old name will be used as a fallback. Nevertheless ye will get deprecat'n warnings while execut'n Hugo.\nNew Th' theme now optionally supports separate favicons fer light \u0026 dark mode.\n5.15.0 (2023-05-29) Change Restored compatibility wit' Cap'n Hugo 0.112.0 or higher. This does not change th' minimum required Cap'n Hugo version.\nTh' attachments shortcode has compatiblity issues wit' newer Cap'n Hugo versions. Ye must switch t' leaf bundles or be locked t' Cap'n Hugo \u003c 0.112.0 fer now.\nIt be planned t' refactor th' attchments shortcode 'n th' future. This will make it poss'ble t' use th' shortcode 'n branch bundles again but not 'n simple planks anymore. This will most likely come wit' a break'n change.\nChange Th' tabs shortcode has changed behavior if ye haven’t set th' groupid parameter.\nFormerly all tab views without a groupid were treated as so they belong t' th' same group. Now, each tab view be treated as it was given a unique id.\nNew Th' already known tabshas a new friend th' tab shortcode t' make it easier t' create a tab view 'n case ye only need one single tab. Really handy if ye want t' flag yer code examples wit' a language identifier.\nAdditionally fer such a use case, th' whitespace between a tab outline an' th' code be removed if only a single code block be contained.\nNew Besides th' tag taxonomy th' theme now also provides th' category taxonomy out o' th' box an' shows them 'n th' rrrambl'n footer o' each plank.\n5.14.0 (2023-05-20) New Th' taxonomy planks received some love 'n this release, mak'n them better leverage avail'ble screen space an' add'n translat'n support fer th' taxonomy names.\nHugo’s default taxonmies tags an' categories be already contained 'n th' theme’s i18n files. If ye have self-defined taxonomies, ye can add translat'ns by add'n them t' yer own i18n files. If ye don’t provide translat'ns, th' singualar an' plural forms be taken as configured 'n yer config.toml.\nNew T' give ye more flexibility 'n customiz'n yer article layout a new partial content-header.html be introduced.\nThis came out o' th' requirement t' cust'mize th' posit'n o' article tags, which by default be displayed above th' title. A second requirement was t' also show additional taxonomies not supported by th' theme natively. While Cap'n Hugo supports tags an' categories by default, th' theme only displays tags.\nSo how t' adjust th' posit'n o' tags start'n from th' theme’s default whar' tags be only shown above th' title?\nHide tags above title: Overwrite content-header.html wit' an empty file. Show tags between title an' rrrambl'n: Overwrite heading-post.html an' add {{- partial \"tags.html\" . }} t' it. Show tags below rrrambl'n: Overwrite content-footer.html an' add {{- partial \"tags.html\" . }} t' it. New Th' new parameter breadcrumbSeparator be now avail'ble 'n yer config.toml t' change th' - well - separator o' th' breadcrumb items. An appropriate default be 'n place if ye do not configure anyth'n.\n5.13.0 (2023-05-17) Change Th' swagger shortcode was deprecated 'n favor fer th' openapi shortcode. Ye don’t need t' change anyth'n yet as th' old name will be used as a fallback. It be planned t' remove th' swagger shortcode 'n th' next major release.\nAdditionally, th' implemant'n o' this shortcode was switched from RapiDoc t' SwaggerUI.\n5.12.0 (2023-05-04) Change In th' effort t' comply wit' WCAG standards, th' implementat'n o' th' collaps'ble menu was changed (again). While Internet Explorer 11 has issues 'n display'n it, th' functionality still works.\nNew Support fer th' great VSCode Front Matter extension which provides on-premise CMS capabilties t' Cap'n Hugo.\nTh' theme provides Front Matter snippets fer its shorrrtcodes. Currently only English an' German be supported. Put a reference into yer frontmatter.json like this\n{ ... \"frontMatter.extends\": [ \"./vscode-frontmatter/snippets.en.json\" ] ... } New Support fer languages that be written right t' left (like Arabic) be now complete an' extended t' th' menu, th' top navigat'n bar an' print. Ye can experience this 'n th' pirate translat'n. This feature be not avail'ble 'n Internet Explorer 11.\nNew Th' scrollbars be now colored accord'n t' their variant color scheme t' better fit into th' visuals.\n5.11.0 (2023-02-07) Change Th' theme removed th' popular jQuery library from its distribut'n.\nIn case ye made changes t' th' theme that be dependend on this library ye can place a copy o' jQuery into yer static/js directory an' board it from yer own layouts/partials/custom-header.html like this:\n\u003cscript src=\"{{\"js/jquery.min.js\"| relURL}}\" defer\u003e\u003c/script\u003e Change Merrrmaid diagrams can now be configured fer pan an' zoom on site-, page-level or individually fer each graph.\nTh' default sett'n o' on, 'n effect since 1.1.0, changed back t' off as there was interference wit' scroll'n on mobile an' big planks.\nChange Th' theme be now cap'ble t' visually adapt t' yer OS’s light/dark mode sett'n.\nThis be also th' new default sett'n if ye haven’t configured themeVariant 'n yer config.toml.\nAdditionally ye can configure th' variants t' be taken fer light/dark mode wit' th' new themeVariantAuto parameter.\nThis be not supported fer Internet Explorer 11, which still displays 'n th' relearn-light variant.\nChange Th' JavaScript code fer handl'n image lightboxes (provided by Featherlight) was replaced by a CSS-only solut'n.\nThis also changed th' lightbox effects parameter from featherlight=false t' lightbox=false. Nevertheless ye don’t need t' change anyth'n as th' old name will be used as a fallback.\nChange In th' effort t' comply wit' WCAG standards, th' implementat'n o' th' expand shortcode was changed. While Internet Explorer 11 has issues 'n display'n it, th' functionality still works.\nNew Translat'n into Czech. This language be not supported fer search.\nNew GitHub releases be also now tagged fer th' main version (eg. 1.2.x), major version (eg. 1.x) an' th' latest (just x) release mak'n it easier fer ye t' pin th' theme t' a certain version.\n5.10.0 (2023-01-25) New Th' attachments, badge, button an' notice shorrrtcodes have a new parameter color t' set arbitrary CSS color values.\nAdditionally th' --ACCENT-color brand color introduced 'n version 5.8.0 be now supported wit' these shorrrtcodes.\n5.9.0 (2022-12-23) Break'n Wit' this version it be now poss'ble t' not only have sections on th' first menu level but also planks.\nIt was later discovered, that this causes planks only meant t' be displayed 'n th' More section o' th' menu an' stored directly inside yer rrrambl'n directory t' now show up 'n th' menu aswell.\nT' get rid o' this undesired behavior ye have two choices:\nMake th' plank file a headless branch bundle (contained 'n its own subdirectory an' called _index.md) an' add th' follow'n frontmatter configurat'n t' th' file (see exampleSite’s content/showcase/_index.en.md). This causes its rrrambl'n t' not be ontained 'n th' sitemap.\ntitle = \"Showcase\" [_build] render = \"always\" list = \"never\" publishResources = true Store th' plank file fer below a parent headless branch bundle an' add th' follow'n frontmatter t' he parent (see exampleSite’s content/more/_index.en.md).\n# title = \"More\" ### ATTENTION: Don't give this plank a title as this will cause it t' be 'n th' breadcrumbs - a th'n ye most likely don't want [_build] render = \"never\" list = \"never\" publishResources = falseIn this case, th' file itself can be a branch bundle, leaf bundle or simple plank (see exampleSite’s content/more/credits.en.md). This causes its rrrambl'n t' be contained 'n th' sitemap.\ntitle = \"Credits\" Change Th' required folder name fer th' attachments shortcode was changed fer leaf bundles.\nPreviously, th' attachments fer leaf bundles 'n non-multilang setups were required t' be 'n a files subdirectory. For plank bundles an' leaf bundles 'n multilang setups they were always required t' be 'n a _index.\u003cLANGCODE\u003e.files or index.\u003cLANGCODE\u003e.files subdirectory accordingly.\nThis added unnessessary complexity. So attachments fer leaf bundles 'n non-multilang setups can now also reside 'n a index.files directory. Although th' old files directory be now deprecated, if both directories be present, only th' old files directory will be used fer compatiblity.\nChange Absolute links prefixed wit' http:// or https:// be now opened 'n a separate browser tab.\nYe can revert back t' th' old behavior by defin'n externalLinkTarget=\"_self\" 'n th' params section o' yer config.toml.\nNew Th' theme now supports Hugo’s module system.\n5.8.0 (2022-12-08) New Th' new badge shortcode be now avail'ble t' add highly configur'ble markers t' yer rrrambl'n as ye can see it on this plank.\nNew Th' new ay'con shortcode simplyfies th' usage o' ay'cons. This can even be combined wit' also new badge shortcode.\nNew Th' theme now supports some o' GFM (GitHub Flavored Markdown) rules an' Cap'n Hugo Marrrkdown extensions, namely task lists, defint'n lists an' footnotes.\nNew A new color --ACCENT-color was introduced which be used fer highlightn'n search results on th' plank. In case ye simply don’t care, ye don’t need t' change anyth'n 'n yer variant stylesheet as th' old yellow color be still used as default.\n5.7.0 (2022-11-29) Change Th' Korean language translat'n fer this theme be now avail'ble wit' th' language code ko. Formerly th' country code kr was used instead.\nNew Th' button shortcode can now also be used as a real button inside o' HTML forms - although this be a pretty rare use case. Th' documentat'n was updated accordingly.\nNew Th' search now supports th' Korean language.\n5.6.0 (2022-11-18) New This release introduces an additional dedicated search plank. On this plank, displayed search results have more space mak'n it easier scann'n thru large number o' results.\nT' activate this feature, ye need t' configure it 'n yer config.toml as a new outputformat SEARCHPAGE fer th' home plank. If ye don’t configure it, no dedicated search plank will be access'ble an' th' theme works as before.\nYe can access th' search plank by either click'n on th' magnifier glass or press'n enter inside o' th' search box.\nNew Keyboard handl'n fer th' TOC an' search was improved.\nPress'n CTRL+ALT+t now will not only toggle th' TOC overlay but also places th' focus t' th' first head'n on open'n. Subsequently this makes it poss'ble t' easily select head'ns by us'n th' TAB key.\nTh' search received its own brand new keyboard shortcut CTRL+ALT+f. This will focus th' cursor inside o' th' the search box so ye can immediately start yer search by typ'n.\nNew Ye be now able t' turn off th' generat'n o' generator meta tags 'n yer HTML head t' hide th' used versions o' Cap'n Hugo an' this theme.\nT' configure this 'n yer config.toml make sure t' set Hugo’s disableHugoGeneratorInject=true an' also [params] disableGeneratorVersion=true, otherwise Cap'n Hugo will generate a meta tag into yer home plank automagically.\nNew Creat'n o' yer project gets a little bit faster wit' this release.\nThis addresses increased build time wit' th' 5.x releases. Th' theme now heavily caches partial results lead'n t' improved performance. T' further increase performance, unnecessary parts o' th' plank be now skipped fer creat'n o' th' print output (eg. menus, navigat'n bar, etc.).\n5.5.0 (2022-11-06) Change Th' way images be processed has changed. Now images be lazy boarded by default which speeds up plank board on slow networks and/or big planks an' also th' print preview.\nFor that th' JavaScript code t' handle th' lightbox an' image effects on th' client side was removed 'n favour fer static generat'n o' those effects on th' server.\nIf ye have used HTML directly 'n yer Marrrkdown files, this now has th' downside that it doesn’t respect th' effect query parameter anymore. In this case ye have t' migrate all yer HTML img URLs manually t' th' respective HTML attributes.\nOld New \u003cimg src=\"pic.png?width=20vw\u0026classes=shadow,border\"\u003e \u003cimg src=\"pic.png\" style=\"width:20vw;\" class=\"shadow border\"\u003e 5.4.0 (2022-11-01) Change Wit' th' proper sett'ns 'n yer config.toml yer plank be now serv'ble from th' local file system us'n file:// URLs.\nPlease note that th' searchbox will only work fer this if ye reconfigure yer outputformat fer th' homepage 'n yer config.toml from JSON t' SEARCH. Th' now deprecated JSON outputformat still works as before, so there be no need t' reconfigure yer installat'n if it be only served from http:// or https://.\nChange Th' button shortcode has a new parameter target t' set th' destinat'n frame/window fer th' URL t' open. If not given, it defaults t' a new window/tab fer external URLs or be not set at all fer internal URLs. Previously even internal URLs whar' opened 'n a new window/tab.\nNew Th' math shortcode an' mermaid shortcode now also support th' align parameter if codefence rules be used.\nNew Support fer languages that be written right t' left (like Arabic). This be only implemented fer th' rrrambl'n area but not th' navigat'n sidebar. This feature be not avail'ble 'n Internet Explorer 11.\nNew Translat'n into Finnish (Suomi).\n5.3.0 (2022-10-07) Change In th' effort t' comply wit' WCAG standards, th' implementat'n o' th' collaps'ble menu was changed. Th' functionality o' th' new implementat'n does not work wit' old browsers (Internet Explorer 11).\nNew Image formatt'n has two new classes t' align images t' th' left or right. Additionally, th' already exist'n inline opt'n be now documented.\nNew Print'n fer th' swagger shortcode was optimized t' expand sections that be usually closed 'n interactive mode. This requires print support t' be configured.\n5.2.0 (2022-08-03) Change If you’ve set collapsibleMenu = true 'n yer config.toml, th' menu will be expanded if a search term be found 'n a collapsed submenu. Th' menu will return t' its initial collapse state once th' search term does not match any submenus. 5.1.0 (2022-07-15) 0.95.0 This release requires a newer Cap'n Hugo version.\nChange Because th' print preview URLs were non deterministic fer normal planks 'n comparison t' plank bundles, this be now changed. Each print preview be now access'ble by add'n a index.print.html t' th' default URL.\nYe can revert this behavior by overwrit'n th' PRINT output format sett'n 'n yer config.tomlt':\n[outputFormats] [outputFormats.PRINT] name= \"PRINT\" baseName = \"index\" path = \"_print\" isHTML = true mediaType = 'text/html' permalink'ble = false 5.0.0 (2022-07-05) Break'n Th' theme changed how JavaScript an' CSS dependencies be boarded t' provide a better performance. In case you’ve added own JavaScript code that depends on th' themes jQuery implementat'n, ye have t' put it into a separate *.js file (if not already) an' add th' defer keyword t' th' script element. Eg.\n\u003cscript defer src=\"myscript.js\"\u003e\u003c/script\u003e Change Th' way archetypes be used t' generate output has changed. Th' new systems allows ye, t' redefine exist'n archetypes or even generate yer own ones.\nYer exist'n markdown files will still work like before an' therefore ye don’t need t' change anyth'n after th' upgrade. Nevertheless, it be recommended t' adapt yer exist'n markdown files t' th' new way as follows:\nfer yer home plank, add th' frontmatter parameter archetype = \"home\" an' remove th' lead'n head'n\nfer all files contain'n th' deprecated frontmatter parameter chapter = true, replace it wit' archetype = \"chapter\" an' remove th' lead'n head'ns\nChange Th' frontmatter opt'ns pre / post were renamed t' menuPre / menuPost. Th' old opt'ns will still be used if th' new opt'ns aren’t set. Therefore ye don’t need t' change anyth'n after th' upgrade.\nNew Add'n new partials heading-pre.html / heading-post.html an' accord'n frontmatter opt'ns headingPre / headingPost t' modify th' way yer page`s main head'n gets styled.\nNew Th' new shortcode math be avail'ble t' add beautiful math an' chemical formulae. See th' documentat'n fer avail'ble features. This feature will not work wit' Internet Explorer 11.\n4.2.0 (2022-06-23) Break'n Th' second parameter fer th' include shortcode was switched 'n mean'n an' was renamed from showfirsthead'n t' hidefirsthead'n. If ye haven’t used this parameter 'n yer shortcode, th' default behavior hasn’t changed an' ye don’t need t' change anyth'n.\nIf you’ve used th' second boolean parameter, ye have t' rename it an' invert its value t' achieve th' same behavior.\nChange Previously, if th' tabs shortcode could not find a tab item because, th' tabs ended up empty. Now th' first tab be selected instead.\nChange Th' landingPageURL was removed from config.toml. Ye can safely remove this as well from yer configurat'n as it be not used anymore. Th' theme will detect th' land'n plank URL automatically an' will point t' th' project’s homepage. If ye want t' support a different link, overwrite th' logo.html partial.\nNew All shorrrtcodes can now be also called from yer partials. Examples fer this be added t' th' documentat'n o' each shortcode.\n4.1.0 (2022-06-12) New While fix'n issues wit' th' search functionality fer non Latin languages, ye can now configure t' have multiple languages on a single plank. 4.0.0 (2022-06-05) Break'n Th' custom_css config parameter was removed from th' configurat'n. If used 'n an exist'n installat'n, it can be achieved by overrid'n th' custom-header.html template 'n a much more generic manner.\nBreak'n Because anchor hover color was not configur'ble without introduc'n more complexity t' th' variant stylesheets, we decided t' remove --MAIN-ANCHOR-color instead. Ye don’t need t' change anyth'n 'n yer custom color stylesheet as th' anchors now get their colors from --MAIN-LINK-color an' --MAIN-ANCHOR-HOVER-color respectively.\nNew All shorrrtcodes now support named parameter. Th' positional parameter be still supported but will not be enhanced wit' new features, so ye don’t need t' change anyth'n 'n yer installat'n.\nThis applies t' expand, include, notice an' siteparam.\nNew Th' button shortcode received some love an' now has a parameter fer th' color style similar t' other shorrrtcodes.\nNew New colors --PRIMARY-color an' --SECONDARY-color were added t' provide easier modificat'n o' yer custom style. Shorrrtcodes wit' a color style can now have primary or secondary as additional values.\nThese two colors be th' default fer other, more specific color variables. Ye don’t need t' change anyth'n 'n yer exist'n custom color stylesheets as those variables get reason'ble default values.\nNew Translat'n into Polish. This language be not supported fer search.\nNew Th' documentat'n fer all shorrrtcodes were revised.\n3.4.0 (2022-04-03) Break'n If ye had previously overwritten th' custom-footer.html partial t' add visual elements below th' rrrambl'n o' yer plank, ye have t' move this rrrambl'n t' th' new partial content-footer.html. custom-footer.html was never meant t' contain HTML other than additional styles an' JavaScript.\nNew If ye prefer expandable/collaps'ble menu items, ye can now set collapsibleMenu=true 'n yer config.toml. This will add arrows t' all menu items that contain sub menus. Th' menu will expand/collapse without navigat'n if ye click on an arrow.\nNew Ye can activate print support 'n yer config.toml t' add th' capability t' print whole chapters or even th' complete ship.\nNew Translat'n into Traditional Chinese.\n3.3.0 (2022-03-28) New Introduct'n o' new CSS variables t' set th' font. Th' theme distinguishes between --MAIN-font fer all rrrambl'n text an' --CODE-font fer inline or block code. There be additional overrides fer all head'ns. See th' theme variant generator o' th' exampleSite fer all avail'ble variables.\nNew Th' new shortcode swagger be avail'ble t' include a UI fer REST OpenAPI specificat'ns. See th' documentat'n fer avail'ble features. This feature will not work wit' Internet Explorer 11.\n3.2.0 (2022-03-19) 0.93.0 This release requires a newer Cap'n Hugo version.\nChange In this release th' Merrrmaid JavaScript library will only be boarded on demand if th' plank contains a Merrrmaid shortcode or be us'n Merrrmaid codefences. This changes th' behavior o' disableMermaid config opt'n as follows: If a Merrrmaid shortcode or codefence be found, th' opt'n will be ignored an' Merrrmaid will be boarded regardlessly.\nTh' opt'n be still useful 'n case ye be us'n script'n t' set up yer graph. In this case no shortcode or codefence be involved an' th' library be not boarded by default. In this case ye can set disableMermaid=false 'n yer frontmatter t' force th' library t' be boarded. See th' theme variant generator o' th' exampleSite fer an example.\nNew Additional color variant vari'ble --MERMAID-theme t' set th' variant’s Merrrmaid theme. This causes th' Merrrmaid theme t' switch wit' th' color variant if it defers from th' sett'n o' th' formerly selected color variant.\n3.1.0 (2022-03-15) New attachment an' notice shorrrtcodes have a new parameter t' override th' default ay'con. Allowed values be all Font Awesome 5 Free ay'cons. 3.0.0 (2022-02-22) Break'n We made changes t' th' menu footer. If ye have yer menu-footer.html partial overridden, ye may have t' review th' styl'n (eg. margins/paddings) 'n yer partial. For a reference take a look into th' menu-footer.html partial that be com'n wit' th' exampleSite.\nThis change was made t' allow yer own menu footer t' be placed right after th' so called prefooter that comes wit' th' theme (contain'n th' language switch an' Clear history functionality).\nBreak'n We have changed th' default colors from th' original Learrrn theme (the purple menu header) t' th' Relearrrn defaults (the light green menu header) as used 'n th' official documentat'n.\nThis change will only affect yer installat'n if you’ve not set th' themeVariant parameter 'n yer config.toml. If ye still want t' use th' Learrrn color variant, ye have t' explicitly set themeVariant=\"learn\" 'n yer config.toml.\nAvast, that this will also affect yer ship if viewed wit' Internet Explorer 11 but 'n this case it can not be reconfigured as Internet Explorer does not support CSS variables.\nChange Due t' a bug, that we couldn’t fix 'n a general manner fer color variants, we decided t' remove --MENU-SEARCH-BOX-ICONS-color an' introduced --MENU-SEARCH-color instead. Ye don’t need t' change anyth'n 'n yer custom color stylesheet as th' old name will be used as a fallback.\nChange For consistency reasons, we renamed --MENU-SEARCH-BOX-color t' --MENU-SEARCH-BORDER-color. Ye don’t need t' change anyth'n 'n yer custom color stylesheet as th' old name will be used as a fallback.\nNew Wit' this release ye be now cap'ble t' define yer own dark mode variants.\nT' make this poss'ble, we have introduced a lot more color variables ye can use 'n yer color variants. Yer old variants will still work an' don’t need t' be changed as appropriate fallback values be used by th' theme. Nevertheless, th' new colors allow fer much more customizat'n.\nT' see what’s now poss'ble, see th' new variants relearn-dark an' neon that be com'n wit' this release.\nNew T' make th' creat'n o' new variants easier fer ye, we’ve added a new interactive theme variant generator. This feature will not work wit' Internet Explorer 11.\nNew Ye can now configure multiple color variants 'n yer config.toml. In this case, th' first variant be th' default chosen on first view an' a variant selector will be shown 'n th' menu footer. See th' documentat'n fer configurat'n.\nAvast, that th' new variant selector will not work wit' Internet Explorer 11 as it does not support CSS variables. Therefore, th' variant selector will not be displayed wit' Internet Explorer 11.\n2.9.0 (2021-11-19) Break'n This release removes th' themes implementat'n o' ref/relref 'n favor fer Hugos standard implementat'n. This be because o' inconsistencies wit' th' themes implementat'n. In advantage, yer project becomes standard compliant an' exchang'n this theme 'n yer project t' some other theme will be effortless.\nIn a standard compliant form ye must not link t' th' *.md file but t' its logical name. You’ll see, referenc'n other planks becomes much easier. All three types result 'n th' same reference:\nType Non-Standard Standard Branch bundle basics/configuration/_index.md basics/configurat'n Leaf bundle basics/configuration/index.md basics/configurat'n Plank basics/configurat'n.md basics/configurat'n If you’ve linked from a plank o' one language t' a plank o' another language, conversion be a bit more difficult but Cap'n Hugo got ye covered as well.\nAlso, th' old themes implementat'n allowed refs t' non-exist'n rrrambl'n. This will cause Hugos implementat'n t' show th' error below an' abort th' generat'n. If yer project relies on this old behavior, ye can reconfigure th' error handl'n o' Hugos implementat'n.\nIn th' best case yer usage o' th' old implementat'n be already standard compliant an' ye don’t need t' change anyth'n. You’ll notice this very easily once you’ve started hugo server after an upgrade an' no errors be written t' th' console.\nYe may see errors on th' console after th' update 'n th' form:\nERROR 2021/11/19 22:29:10 [en] REF_NOT_FOUND: Ref \"basics/configuration/_index.md\": \"hugo-theme-relearn\\exampleSite\\content\\_index.en.md:19:22\": plank not foundIn this case, ye must apply one o' two opt'ns:\nStart up a text editor wit' regular expression support fer search an' replace. Search fer (ref\\s+\"[^\"]*?)(?:/_index|/index)?(?:\\.md)?(#[^\"]*?)?\" an' replace it by $1$2\" 'n all *.md files. This be th' recommended choice.\nCopy th' old implementat'n files theme/hugo-theme-relearn/layouts/shortcode/ref.html an' theme/hugo-theme-relearn/layouts/shortcode/relref.html t' yer own projects layouts/shortcode/ref.html an' layouts/shortcode/relref.html respectively. This be not recommended as yer project will still rely on non-standard behavior afterwards.\n2.8.0 (2021-11-03) Change Although never officially documented, this release removes th' font Novacento/Novecento. If ye use it 'n an overwritten CSS please replace it wit' Work Sans. This change was necessary as Novacento did not provide all Latin special characters an' lead t' mixed styled character text eg. fer Czech.\nNew Th' theme now supports favicons served from static/images/ named as favicon or logo 'n SVG, PNG or ICO format out o' th' box. An overridden partial layouts/partials/favicon.html may not be necessary anymore 'n most cases.\nNew Ye can hide th' t'ble o' contents menu fer th' whole ship by sett'n th' disableToc opt'n 'n yer config.toml. For an example see th' example configurat'n.\n2.7.0 (2021-10-24) New Optional second parameter fer notice shortcode t' set title 'n box header. 2.6.0 (2021-10-21) New Yer ship can now be served from a subfolder if ye set baseURL an' canonifyURLs=true 'n yer config.toml. See th' documentat'n fer a detailed example. 2.5.0 (2021-10-08) Change New colors --CODE-BLOCK-color an' --CODE-BLOCK-BG-color were added t' provide a fallback fer Hugos rules highlight'n 'n case guessSyntax=true be set. Ideally th' colors be set t' th' same values as th' ones from yer chosen chroma style. 2.4.0 (2021-10-07) Change Creat'n o' customized stylesheets was simplified down t' only contain th' CSS variables. Everyth'n else can an' should be deleted from yer custom stylesheet t' assure everyth'n works fine. For th' predefined stylesheet variants, this change be already included.\nNew Hidden planks be displayed by default 'n their accord'n tags plank. Ye can now turn off this behavior by sett'n disableTagHiddenPages=true 'n yer config.toml.\nNew Ye can define th' expansion state o' yer menus fer th' whole ship by sett'n th' alwaysopen opt'n 'n yer config.toml. Please see further documentat'n fer poss'ble values an' default behavior.\nNew New frontmatter ordersectionsby opt'n t' change immediate children sort'n 'n menu an' children shortcode. Poss'ble values be title or weight.\nNew Alternate rrrambl'n o' a plank be now advertised 'n th' HTML meta tags. See Cap'n Hugo documentat'n.\n2.3.0 (2021-09-13) 0.81.0 This release requires a newer Cap'n Hugo version.\nNew Showcase multilanguage features by provid'n a documentat'n translat'n “fer us pirrrates”. There will be no other translat'ns besides th' original English one an' th' Pirates one due t' maintenance constraints.\n2.2.0 (2021-09-09) New Hidden planks be displayed by default 'n th' sitemap generated by Cap'n Hugo an' be therefore vis'ble fer search engine index'n. Ye can now turn off this behavior by sett'n disableSeoHiddenPages=true 'n yer config.toml. 2.1.0 (2021-09-07) 0.69.0 This release requires a newer Cap'n Hugo version.\nChange In case th' site’s structure contains additional *.md files not part o' th' ship (eg files that be meant t' be included by ship planks - see CHANGELOG.md 'n th' exampleSite), they will now be ignored by th' search.\nNew Hidden planks be indexed fer th' ship search by default. Ye can now turn off this behavior by sett'n disableSearchHiddenPages=true 'n yer config.toml.\nNew If a search term be found 'n an expand shortcode, th' expand will be opened.\nNew Th' menu will scroll th' active item into view on board.\n2.0.0 (2021-08-28) Change Rules highlight'n was switched t' th' built 'n Hugo mechanism. Ye may need t' configure a new stylesheet or decide t' roll ye own as described on 'n th' Cap'n Hugo documentat'n\nChange In th' predefined stylesheets there was a typo an' --MENU-HOME-LINK-HOVERED-color must be changed t' --MENU-HOME-LINK-HOVER-color. Ye don’t need t' change anyth'n 'n yer custom color stylesheet as th' old name will be used as a fallback.\nChange --MENU-HOME-LINK-color an' --MENU-HOME-LINK-HOVER-color were miss'n 'n th' documentat'n. Ye should add them t' yer custom stylesheets if ye want t' override th' defaults.\nChange Arrow navigat'n an' children shortcode were ignor'n sett'n fer ordersectionsby. This be now changed an' may result 'n different sort'n order o' yer sub planks.\nChange If hidden planks be accessed directly by typ'n their URL, they will be exposed 'n th' menu.\nChange A plank without a title will be treated as hidden=true.\nNew Ye can define th' expansion state o' yer menus 'n th' frontmatter. Please see further documentat'n fer poss'ble values an' default behavior.\nNew New partials fer defin'n pre/post rrrambl'n fer menu items an' th' rrrambl'n. See documentat'n fer further read'n.\nNew Shortcode children wit' new parameter containerstyle.\nNew New shortcode include t' include arbitrary file rrrambl'n into a plank.\n1.2.0 (2021-07-26) New Shortcode expand wit' new parameter t' open on plank board. 1.1.0 (2021-07-02) Break'n Merrrmaid diagrams can now be panned an' zoomed. This isn’t configur'ble yet.\nNew Merrrmaid config opt'ns can be set 'n config.toml.\n1.0.0 (2021-07-01) 0.65.0 Th' requirement fer th' Cap'n Hugo version o' this theme be th' same as fer th' Learrrn theme version 2.5.0 on 2021-07-01.\nNew Initial fork o' th' Learrrn theme based on Learrrn 2.5.0 on 2021-07-01. This introduces no new features besides a global rename t' Relearrrn an' a new logo. For th' reasons behind fork'n th' Learrrn theme, see this comment 'n th' Learrrn issues.\n",
+    "content": " Arrr! Pirrrates Fello' pirrrates, grog made us dizzy! Be awarrre some stuff may look weird in this trrranslat'n. Like Merrrmaids, do'n math or chemistrrry and stuff.\nThis document shows ye what’s new 'n th' latest release an' flags it wit' one o' th' follow'n badges. For a detailed list o' changes, see th' history plank.\n0.95.0 Th' minimum required Cap'n Hugo version.\nBreak'n A change that requires act'n by ye after upgrad'n t' assure th' ship be still functional.\nChange A change 'n default behavior that may requires act'n by ye if ye want t' revert it.\nNew Marks new behavior ye might find interest'n or comes configur'ble.\n5.24.0.beta Change Th' light themes have a bit more contrast fer rrrambl'n text an' head'ns. Also th' syntaxhighlight'n was changed t' th' more colorful MonokaiLight. This br'ns th' syntaxhighlightn'n 'n sync wit' th' correspond'n dark theme variants, which be us'n Monokai.\nNew Ye now can configure additional opt'ns fer every theme variant 'n yer config.toml. This allows fer optional advanced functionality. Ye don’t need t' change anyth'n as th' old configurat'n opt'ns will still work (but may generate warnings now).\nTh' advanced functionality allows ye t' set an explicit name fer a theme variant, set different colors (if ye be us'n monochrome SVGs) or even different ay'cons (handy if ye want t' adjust colors fer PNGs, GIFs or JPGs) an' now allows fer multiple auto mode variants that adjust t' th' light/dark preference o' yer OS sett'ns.\n5.23.0 (2023-11-03) Change Wit' 0.120.0 th' author sett'ns move into th' [params] array 'n yer config.toml. Because this collides wit' th' previous way, th' theme expected author informat'n, it now adheres t' Cap'n Hugo standards an' prints out a warning dur'n built if someth'n be wrong.\nChange yer previous sett'n from\n[params] author = \"Hugo\"t'\n[params] author.name = \"Hugo\" Change Taxonomy term planks now add th' breadcrumb fer each listed plank. If this gets too crowded fer ye, ye can turn th' breadcrumbs off 'n yer config.toml by add'n disableTermBreadcrumbs=true.\nNew Taxonomy an' term planks be now allowed t' contain rrrambl'n. This be added inbetween th' title an' th' plank list.\nNew It be now poss'ble t' print custom taxonomies anywhere 'n yer plank. See th' docs.\nNew It be now poss'ble t' adjust th' menu width fer yer whole ship. See th' docs.\nNew This release adds social media meta tags fer th' Open Graph protocol an' Twitter Cards t' yer ship. See th' docs.\nNew This release comes wit' additional sort opt'ns fer th' menu an' th' children shortcode. Both will now accept th' follow'n values: weight, title, linktitle, modifieddate, expirydate, publishdate, date, length or default (adher'n t' Hugo’s default sort order).\nNew Th' theme now provides a mechanism t' board further JavaScript dependencies defined by ye only if it be needed. This comes 'n handy if ye want t' add own shorrrtcodes that depend on additional JavaScript code t' be boarded. See th' docs.\nNew Th' theme has updated its Merrrmaid dependency t' 10.6.0. This adds support fer th' xychart type.\nNew This release adds port'ble Marrrkdown links.\nPreviously it was not poss'ble t' use pure Marrrkdown links 'n a configurat'n independend way t' link t' planks inside o' yer project. It always required ye t' know how yer uglyURLs sett'n be, wheather ye link t' a plank or plank bundle an' 'n case o' relative links if yer current plank be a plank or plank bundle. (eg. [generator](generator/index.html) vs. [generator](generator.html)). This be a hassle as ye have t' change these links manually once ye change yer uglyURLs sett'n or change th' type o' a plank.\nYe could work around this by us'n th' relref shortcode (eg [generator]({{% relref \"../generator\" %}})) which works but results 'n non-port'ble Marrrkdown.\nNow it’s poss'ble t' use th' same path o' a call t' relref 'n a plain Marrrkdown link (eg [generator](../generator)). This be independend o' any configurat'n sett'ns or th' plank types involved 'n link'n. Avast, that this requires yer links t' be given without any extension, so [generator](generator/index.html) will work as before.\nTh' follow'n types o' link'n be supported:\nlink descript'n [generator](en/basics/generator) absolute from yer project root (multilang) [generator](/en/basics/generator) absolute from yer project root (multilang) [generator](basics/generator) absolute from yer current language root [generator](/basics/generator) absolute from yer current language root [generator](./../generator) relative from th' current plank [generator](../generator) relative from th' current plank 5.22.0 (2023-10-02) Change This release fixes an issue whar' 'n unfortunate condit'ns DOM ids generated by Cap'n Hugo may collide wit' DOM ids set by th' theme. T' avoid this, all theme DOM ids be now prefixed wit' R-.\nIf ye haven’t modified anyth'n, everyth'n be fine. Otherwise ye have t' check yer custom CSS rules an' JavaScript code.\nChange Ye can now have structural sections 'n th' hierarchical menu without generat'n a plank fer it.\nThis can come 'n handy, if rrrambl'n fer such a section plank doesn’t make much sense t' ye. See th' documentat'n fer how t' do this.\nThis feature may require ye t' make changes t' yer exist'n installat'n if ye be already us'n shortcuts t' planks inside o' yer project wit' a headless branch parent.\nIn this case it be advised t' remove th' title from th' headless branch parent’s frontmatter, as it will otherwise appear 'n yer breadcrumbs.\nNew It be now poss'ble t' overwrite th' sett'n fer collapsibleMenu o' yer config.toml inside o' a page’s frontmatter.\nNew If a Merrrmaid graph be zoom'ble a button t' reset th' view be now added t' th' upper right corner. Th' button be only shown once th' mouse be moved over th' graph.\nNew It be now poss'ble t' remove th' root breadcrumb by sett'n disableRootBreadcrumb=true 'n yer config.toml.\nNew Th' output o' th' dedicated search plank now displays th' result’s breadcrumb.\nNew T'ble rows now change their background color on every even row.\nNew Translat'n into Swahili. This language be not supported fer search.\n5.21.0 (2023-09-18) Change We made changes t' th' menu footer t' improve alignment wit' th' menu items 'n most cases. Care was taken not t' break yer exist'n overwritten footer. Anyways, if ye have yer menu-footer.html partial overridden, ye may want t' review th' styl'n (eg. margins/paddings) o' yer partial.\nNew This release comes wit' an awesome new feature, that allows ye t' cust'mize yer topbar buttons, change behavior, reorder them or define entirely new ones, unique t' yer installat'n. See th' documentat'n fer further details.\nNew Th' theme has updated its Swagger dependency t' 5.7.2 fer th' openapi shortcode. This br'ns support fer OpenAPI Specificat'n 3.1.\n5.20.0 (2023-08-26) Change Th' theme has updated its Swagger dependency t' 5.4.1 fer th' openapi shortcode.\nWit' this comes a change 'n th' light theme variants o' Relearrrn Bright, Relearrrn Light an' Zen Light by switch'n th' syntaxhighlightn'n inside o' openapi t' a light scheme. This br'ns it more 'n sync wit' th' code style used by th' theme variants itself.\nAdditionally, th' syntaxhighlightn'n inside o' openapi fer print'n was switched t' a light scheme fer all theme variants.\nIf ye dislike this change, ye can revert this 'n yer theme variants CSS by add'n\n--OPENAPI-CODE-theme: obsidian; --PRINT-OPENAPI-CODE-theme: obsidian; Change For consistency reasons, we renamed th' CSS vari'ble --MENU-SECTION-HR-color t' --MENU-SECTION-SEPARATOR-color. Ye don’t need t' change anyth'n 'n yer custom color stylesheet as th' old name will be used as a fallback.\nNew Th' theme variants Zen Light an' Zen Dark now add more contrast between menu, topbar an' rrrambl'n by add'n thin borders.\nThose borders be now configur'ble by us'n th' CSS variables --MAIN-TOPBAR-BORDER-color, --MENU-BORDER-color, --MENU-TOPBAR-BORDER-color, --MENU-TOPBAR-SEPARATOR-color, --MENU-HEADER-SEPARATOR-color an' --MENU-SECTION-ACTIVE-CATEGORY-BORDER-color.\nFor exist'n variants noth'n has changed visually.\nNew Th' default values fer th' image effects be now configur'ble fer yer whole ship via config.toml or fer each plank thru frontmatter.\nNew This release fixes a long outstand'n bug whar' Merrrmaid graphs could not be displayed if they were initially hidden - like 'n collapsed expand or inactive tabs.\nNew Restored compatibility wit' Cap'n Hugo versions lower than 0.111.0 fer th' highlight shortcode. This does not change th' minimum required Cap'n Hugo version.\n5.19.0 (2023-08-12) New Th' highlight shortcode now accepts th' new parameter title. This displays th' code like a single tab. This be also avail'ble us'n codefences an' makes it much easier t' write nicer code samples.\nNew Th' theme has added two new color variants zen-light an' zen-dark. Check it out!\nNew Th' theme now dispatches th' custom event themeVariantLoaded on th' document when th' variant be fully boarded either initially or by switch'n th' variant manually wit' th' variant selector.\nNew Th' theme has updated its Merrrmaid dependency t' 10.3.1. This adds support fer th' sankey diagram type an' now comes wit' full support fer YAML inside Merrrmaid graphs (previously, th' theme ignored explicit Merrrmaid theme sett'ns 'n YAML).\nNew Translat'n into Hungarian.\n5.18.0 (2023-07-27) Change Th' theme adds additional warnings fer deprecated or now unsupported features.\nChange There be visual improvements 'n display'n text links 'n yer rrrambl'n aswell as t' some other click'ble areas 'n th' theme. If you’ve overwritten some theme styles 'n yer own CSS, keep this 'n mind.\nNew Restored compatibility wit' Cap'n Hugo 0.95.0 or higher. This does not change th' minimum required Cap'n Hugo version.\nNew Th' siteparam shortcode be now cap'ble 'n display'n nested params aswell as support'n text formatt'n.\n5.17.0 (2023-06-22) Change Th' default behavior fer th' copy-to-clipboard feature fer code blocks has changed.\nTh' copy-to-clipboard button fer code blocks will now only be displayed if th' reader hovers th' code block.\nIf ye dislike this new behavior ye can turn it off an' revert t' th' old behavior by add'n [params] disableHoverBlockCopyToClipBoard=true t' yer config.toml.\nNew Restored compatibility wit' Cap'n Hugo 0.114.0 or higher. This does not change th' minimum required Cap'n Hugo version.\nNew Th' new highlight shortcode replaces Hugo’s default implementat'n an' be fully compat'ble. So ye don’t need t' change anyth'n.\nIn addit'n it offers some extensions. Currently only th' wrap extension opt'n be provided t' control whether a code block should be wrapped or scrolled if t' long t' fit.\n5.16.0 (2023-06-10) Change Th' theme now provides warnings fer deprecated or now unsupported features. Th' warnings include hints how t' fix them an' an additional link t' th' documenat'n.\nDEPRECATION warnings mark features that still work but may be removed 'n th' future.\nUNSUPPORTED warnings mark features that will not work anymore.\nChange Th' 404 error plank was revamped. Hopefully ye will not see this very often.\nNew Th' tabs shortcode an' th' tab shortcode received some love an' now align wit' their style, color, title an' ay'con parameter t' th' other shorrrtcodes.\nTh' visuals be now slightly different compared t' previous versions. Most note'ble, if ye now display a single code block 'n a tab, its default styl'n will adapt t' that o' a code block but wit' a tab handle at th' top.\nAdditionally th' name parameter was renamed t' title but ye don’t need t' change anyth'n yet as th' old name will be used as a fallback. Nevertheless ye will get deprecat'n warnings while execut'n Hugo.\nNew Th' theme now optionally supports separate favicons fer light \u0026 dark mode.\n5.15.0 (2023-05-29) Change Restored compatibility wit' Cap'n Hugo 0.112.0 or higher. This does not change th' minimum required Cap'n Hugo version.\nTh' attachments shortcode has compatiblity issues wit' newer Cap'n Hugo versions. Ye must switch t' leaf bundles or be locked t' Cap'n Hugo \u003c 0.112.0 fer now.\nIt be planned t' refactor th' attchments shortcode 'n th' future. This will make it poss'ble t' use th' shortcode 'n branch bundles again but not 'n simple planks anymore. This will most likely come wit' a break'n change.\nChange Th' tabs shortcode has changed behavior if ye haven’t set th' groupid parameter.\nFormerly all tab views without a groupid were treated as so they belong t' th' same group. Now, each tab view be treated as it was given a unique id.\nNew Th' already known tabshas a new friend th' tab shortcode t' make it easier t' create a tab view 'n case ye only need one single tab. Really handy if ye want t' flag yer code examples wit' a language identifier.\nAdditionally fer such a use case, th' whitespace between a tab outline an' th' code be removed if only a single code block be contained.\nNew Besides th' tag taxonomy th' theme now also provides th' category taxonomy out o' th' box an' shows them 'n th' rrrambl'n footer o' each plank.\n5.14.0 (2023-05-20) New Th' taxonomy planks received some love 'n this release, mak'n them better leverage avail'ble screen space an' add'n translat'n support fer th' taxonomy names.\nHugo’s default taxonmies tags an' categories be already contained 'n th' theme’s i18n files. If ye have self-defined taxonomies, ye can add translat'ns by add'n them t' yer own i18n files. If ye don’t provide translat'ns, th' singualar an' plural forms be taken as configured 'n yer config.toml.\nNew T' give ye more flexibility 'n customiz'n yer article layout a new partial content-header.html be introduced.\nThis came out o' th' requirement t' cust'mize th' posit'n o' article tags, which by default be displayed above th' title. A second requirement was t' also show additional taxonomies not supported by th' theme natively. While Cap'n Hugo supports tags an' categories by default, th' theme only displays tags.\nSo how t' adjust th' posit'n o' tags start'n from th' theme’s default whar' tags be only shown above th' title?\nHide tags above title: Overwrite content-header.html wit' an empty file. Show tags between title an' rrrambl'n: Overwrite heading-post.html an' add {{- partial \"tags.html\" . }} t' it. Show tags below rrrambl'n: Overwrite content-footer.html an' add {{- partial \"tags.html\" . }} t' it. New Th' new parameter breadcrumbSeparator be now avail'ble 'n yer config.toml t' change th' - well - separator o' th' breadcrumb items. An appropriate default be 'n place if ye do not configure anyth'n.\n5.13.0 (2023-05-17) Change Th' swagger shortcode was deprecated 'n favor fer th' openapi shortcode. Ye don’t need t' change anyth'n yet as th' old name will be used as a fallback. It be planned t' remove th' swagger shortcode 'n th' next major release.\nAdditionally, th' implemant'n o' this shortcode was switched from RapiDoc t' SwaggerUI.\n5.12.0 (2023-05-04) Change In th' effort t' comply wit' WCAG standards, th' implementat'n o' th' collaps'ble menu was changed (again). While Internet Explorer 11 has issues 'n display'n it, th' functionality still works.\nNew Support fer th' great VSCode Front Matter extension which provides on-premise CMS capabilties t' Cap'n Hugo.\nTh' theme provides Front Matter snippets fer its shorrrtcodes. Currently only English an' German be supported. Put a reference into yer frontmatter.json like this\n{ ... \"frontMatter.extends\": [ \"./vscode-frontmatter/snippets.en.json\" ] ... } New Support fer languages that be written right t' left (like Arabic) be now complete an' extended t' th' menu, th' top navigat'n bar an' print. Ye can experience this 'n th' pirate translat'n. This feature be not avail'ble 'n Internet Explorer 11.\nNew Th' scrollbars be now colored accord'n t' their variant color scheme t' better fit into th' visuals.\n5.11.0 (2023-02-07) Change Th' theme removed th' popular jQuery library from its distribut'n.\nIn case ye made changes t' th' theme that be dependend on this library ye can place a copy o' jQuery into yer static/js directory an' board it from yer own layouts/partials/custom-header.html like this:\n\u003cscript src=\"{{\"js/jquery.min.js\"| relURL}}\" defer\u003e\u003c/script\u003e Change Merrrmaid diagrams can now be configured fer pan an' zoom on site-, page-level or individually fer each graph.\nTh' default sett'n o' on, 'n effect since 1.1.0, changed back t' off as there was interference wit' scroll'n on mobile an' big planks.\nChange Th' theme be now cap'ble t' visually adapt t' yer OS’s light/dark mode sett'n.\nThis be also th' new default sett'n if ye haven’t configured themeVariant 'n yer config.toml.\nAdditionally ye can configure th' variants t' be taken fer light/dark mode wit' th' new themeVariantAuto parameter.\nThis be not supported fer Internet Explorer 11, which still displays 'n th' relearn-light variant.\nChange Th' JavaScript code fer handl'n image lightboxes (provided by Featherlight) was replaced by a CSS-only solut'n.\nThis also changed th' lightbox effects parameter from featherlight=false t' lightbox=false. Nevertheless ye don’t need t' change anyth'n as th' old name will be used as a fallback.\nChange In th' effort t' comply wit' WCAG standards, th' implementat'n o' th' expand shortcode was changed. While Internet Explorer 11 has issues 'n display'n it, th' functionality still works.\nNew Translat'n into Czech. This language be not supported fer search.\nNew GitHub releases be also now tagged fer th' main version (eg. 1.2.x), major version (eg. 1.x) an' th' latest (just x) release mak'n it easier fer ye t' pin th' theme t' a certain version.\n5.10.0 (2023-01-25) New Th' attachments, badge, button an' notice shorrrtcodes have a new parameter color t' set arbitrary CSS color values.\nAdditionally th' --ACCENT-color brand color introduced 'n version 5.8.0 be now supported wit' these shorrrtcodes.\n5.9.0 (2022-12-23) Break'n Wit' this version it be now poss'ble t' not only have sections on th' first menu level but also planks.\nIt was later discovered, that this causes planks only meant t' be displayed 'n th' More section o' th' menu an' stored directly inside yer rrrambl'n directory t' now show up 'n th' menu aswell.\nT' get rid o' this undesired behavior ye have two choices:\nMake th' plank file a headless branch bundle (contained 'n its own subdirectory an' called _index.md) an' add th' follow'n frontmatter configurat'n t' th' file (see exampleSite’s content/showcase/_index.en.md). This causes its rrrambl'n t' not be ontained 'n th' sitemap.\ntitle = \"Showcase\" [_build] render = \"always\" list = \"never\" publishResources = true Store th' plank file fer below a parent headless branch bundle an' add th' follow'n frontmatter t' he parent (see exampleSite’s content/more/_index.en.md).\n# title = \"More\" ### ATTENTION: Don't give this plank a title as this will cause it t' be 'n th' breadcrumbs - a th'n ye most likely don't want [_build] render = \"never\" list = \"never\" publishResources = falseIn this case, th' file itself can be a branch bundle, leaf bundle or simple plank (see exampleSite’s content/more/credits.en.md). This causes its rrrambl'n t' be contained 'n th' sitemap.\ntitle = \"Credits\" Change Th' required folder name fer th' attachments shortcode was changed fer leaf bundles.\nPreviously, th' attachments fer leaf bundles 'n non-multilang setups were required t' be 'n a files subdirectory. For plank bundles an' leaf bundles 'n multilang setups they were always required t' be 'n a _index.\u003cLANGCODE\u003e.files or index.\u003cLANGCODE\u003e.files subdirectory accordingly.\nThis added unnessessary complexity. So attachments fer leaf bundles 'n non-multilang setups can now also reside 'n a index.files directory. Although th' old files directory be now deprecated, if both directories be present, only th' old files directory will be used fer compatiblity.\nChange Absolute links prefixed wit' http:// or https:// be now opened 'n a separate browser tab.\nYe can revert back t' th' old behavior by defin'n externalLinkTarget=\"_self\" 'n th' params section o' yer config.toml.\nNew Th' theme now supports Hugo’s module system.\n5.8.0 (2022-12-08) New Th' new badge shortcode be now avail'ble t' add highly configur'ble markers t' yer rrrambl'n as ye can see it on this plank.\nNew Th' new ay'con shortcode simplyfies th' usage o' ay'cons. This can even be combined wit' also new badge shortcode.\nNew Th' theme now supports some o' GFM (GitHub Flavored Markdown) rules an' Cap'n Hugo Marrrkdown extensions, namely task lists, defint'n lists an' footnotes.\nNew A new color --ACCENT-color was introduced which be used fer highlightn'n search results on th' plank. In case ye simply don’t care, ye don’t need t' change anyth'n 'n yer variant stylesheet as th' old yellow color be still used as default.\n5.7.0 (2022-11-29) Change Th' Korean language translat'n fer this theme be now avail'ble wit' th' language code ko. Formerly th' country code kr was used instead.\nNew Th' button shortcode can now also be used as a real button inside o' HTML forms - although this be a pretty rare use case. Th' documentat'n was updated accordingly.\nNew Th' search now supports th' Korean language.\n5.6.0 (2022-11-18) New This release introduces an additional dedicated search plank. On this plank, displayed search results have more space mak'n it easier scann'n thru large number o' results.\nT' activate this feature, ye need t' configure it 'n yer config.toml as a new outputformat SEARCHPAGE fer th' home plank. If ye don’t configure it, no dedicated search plank will be access'ble an' th' theme works as before.\nYe can access th' search plank by either click'n on th' magnifier glass or press'n enter inside o' th' search box.\nNew Keyboard handl'n fer th' TOC an' search was improved.\nPress'n CTRL+ALT+t now will not only toggle th' TOC overlay but also places th' focus t' th' first head'n on open'n. Subsequently this makes it poss'ble t' easily select head'ns by us'n th' TAB key.\nTh' search received its own brand new keyboard shortcut CTRL+ALT+f. This will focus th' cursor inside o' th' the search box so ye can immediately start yer search by typ'n.\nNew Ye be now able t' turn off th' generat'n o' generator meta tags 'n yer HTML head t' hide th' used versions o' Cap'n Hugo an' this theme.\nT' configure this 'n yer config.toml make sure t' set Hugo’s disableHugoGeneratorInject=true an' also [params] disableGeneratorVersion=true, otherwise Cap'n Hugo will generate a meta tag into yer home plank automagically.\nNew Creat'n o' yer project gets a little bit faster wit' this release.\nThis addresses increased build time wit' th' 5.x releases. Th' theme now heavily caches partial results lead'n t' improved performance. T' further increase performance, unnecessary parts o' th' plank be now skipped fer creat'n o' th' print output (eg. menus, navigat'n bar, etc.).\n5.5.0 (2022-11-06) Change Th' way images be processed has changed. Now images be lazy boarded by default which speeds up plank board on slow networks and/or big planks an' also th' print preview.\nFor that th' JavaScript code t' handle th' lightbox an' image effects on th' client side was removed 'n favour fer static generat'n o' those effects on th' server.\nIf ye have used HTML directly 'n yer Marrrkdown files, this now has th' downside that it doesn’t respect th' effect query parameter anymore. In this case ye have t' migrate all yer HTML img URLs manually t' th' respective HTML attributes.\nOld New \u003cimg src=\"pic.png?width=20vw\u0026classes=shadow,border\"\u003e \u003cimg src=\"pic.png\" style=\"width:20vw;\" class=\"shadow border\"\u003e 5.4.0 (2022-11-01) Change Wit' th' proper sett'ns 'n yer config.toml yer plank be now serv'ble from th' local file system us'n file:// URLs.\nPlease note that th' searchbox will only work fer this if ye reconfigure yer outputformat fer th' homepage 'n yer config.toml from JSON t' SEARCH. Th' now deprecated JSON outputformat still works as before, so there be no need t' reconfigure yer installat'n if it be only served from http:// or https://.\nChange Th' button shortcode has a new parameter target t' set th' destinat'n frame/window fer th' URL t' open. If not given, it defaults t' a new window/tab fer external URLs or be not set at all fer internal URLs. Previously even internal URLs whar' opened 'n a new window/tab.\nNew Th' math shortcode an' mermaid shortcode now also support th' align parameter if codefence rules be used.\nNew Support fer languages that be written right t' left (like Arabic). This be only implemented fer th' rrrambl'n area but not th' navigat'n sidebar. This feature be not avail'ble 'n Internet Explorer 11.\nNew Translat'n into Finnish (Suomi).\n5.3.0 (2022-10-07) Change In th' effort t' comply wit' WCAG standards, th' implementat'n o' th' collaps'ble menu was changed. Th' functionality o' th' new implementat'n does not work wit' old browsers (Internet Explorer 11).\nNew Image formatt'n has two new classes t' align images t' th' left or right. Additionally, th' already exist'n inline opt'n be now documented.\nNew Print'n fer th' swagger shortcode was optimized t' expand sections that be usually closed 'n interactive mode. This requires print support t' be configured.\n5.2.0 (2022-08-03) Change If you’ve set collapsibleMenu = true 'n yer config.toml, th' menu will be expanded if a search term be found 'n a collapsed submenu. Th' menu will return t' its initial collapse state once th' search term does not match any submenus. 5.1.0 (2022-07-15) 0.95.0 This release requires a newer Cap'n Hugo version.\nChange Because th' print preview URLs were non deterministic fer normal planks 'n comparison t' plank bundles, this be now changed. Each print preview be now access'ble by add'n a index.print.html t' th' default URL.\nYe can revert this behavior by overwrit'n th' PRINT output format sett'n 'n yer config.tomlt':\n[outputFormats] [outputFormats.PRINT] name= \"PRINT\" baseName = \"index\" path = \"_print\" isHTML = true mediaType = 'text/html' permalink'ble = false 5.0.0 (2022-07-05) Break'n Th' theme changed how JavaScript an' CSS dependencies be boarded t' provide a better performance. In case you’ve added own JavaScript code that depends on th' themes jQuery implementat'n, ye have t' put it into a separate *.js file (if not already) an' add th' defer keyword t' th' script element. Eg.\n\u003cscript defer src=\"myscript.js\"\u003e\u003c/script\u003e Change Th' way archetypes be used t' generate output has changed. Th' new systems allows ye, t' redefine exist'n archetypes or even generate yer own ones.\nYer exist'n markdown files will still work like before an' therefore ye don’t need t' change anyth'n after th' upgrade. Nevertheless, it be recommended t' adapt yer exist'n markdown files t' th' new way as follows:\nfer yer home plank, add th' frontmatter parameter archetype = \"home\" an' remove th' lead'n head'n\nfer all files contain'n th' deprecated frontmatter parameter chapter = true, replace it wit' archetype = \"chapter\" an' remove th' lead'n head'ns\nChange Th' frontmatter opt'ns pre / post were renamed t' menuPre / menuPost. Th' old opt'ns will still be used if th' new opt'ns aren’t set. Therefore ye don’t need t' change anyth'n after th' upgrade.\nNew Add'n new partials heading-pre.html / heading-post.html an' accord'n frontmatter opt'ns headingPre / headingPost t' modify th' way yer page`s main head'n gets styled.\nNew Th' new shortcode math be avail'ble t' add beautiful math an' chemical formulae. See th' documentat'n fer avail'ble features. This feature will not work wit' Internet Explorer 11.\n4.2.0 (2022-06-23) Break'n Th' second parameter fer th' include shortcode was switched 'n mean'n an' was renamed from showfirsthead'n t' hidefirsthead'n. If ye haven’t used this parameter 'n yer shortcode, th' default behavior hasn’t changed an' ye don’t need t' change anyth'n.\nIf you’ve used th' second boolean parameter, ye have t' rename it an' invert its value t' achieve th' same behavior.\nChange Previously, if th' tabs shortcode could not find a tab item because, th' tabs ended up empty. Now th' first tab be selected instead.\nChange Th' landingPageURL was removed from config.toml. Ye can safely remove this as well from yer configurat'n as it be not used anymore. Th' theme will detect th' land'n plank URL automatically an' will point t' th' project’s homepage. If ye want t' support a different link, overwrite th' logo.html partial.\nNew All shorrrtcodes can now be also called from yer partials. Examples fer this be added t' th' documentat'n o' each shortcode.\n4.1.0 (2022-06-12) New While fix'n issues wit' th' search functionality fer non Latin languages, ye can now configure t' have multiple languages on a single plank. 4.0.0 (2022-06-05) Break'n Th' custom_css config parameter was removed from th' configurat'n. If used 'n an exist'n installat'n, it can be achieved by overrid'n th' custom-header.html template 'n a much more generic manner.\nBreak'n Because anchor hover color was not configur'ble without introduc'n more complexity t' th' variant stylesheets, we decided t' remove --MAIN-ANCHOR-color instead. Ye don’t need t' change anyth'n 'n yer custom color stylesheet as th' anchors now get their colors from --MAIN-LINK-color an' --MAIN-ANCHOR-HOVER-color respectively.\nNew All shorrrtcodes now support named parameter. Th' positional parameter be still supported but will not be enhanced wit' new features, so ye don’t need t' change anyth'n 'n yer installat'n.\nThis applies t' expand, include, notice an' siteparam.\nNew Th' button shortcode received some love an' now has a parameter fer th' color style similar t' other shorrrtcodes.\nNew New colors --PRIMARY-color an' --SECONDARY-color were added t' provide easier modificat'n o' yer custom style. Shorrrtcodes wit' a color style can now have primary or secondary as additional values.\nThese two colors be th' default fer other, more specific color variables. Ye don’t need t' change anyth'n 'n yer exist'n custom color stylesheets as those variables get reason'ble default values.\nNew Translat'n into Polish. This language be not supported fer search.\nNew Th' documentat'n fer all shorrrtcodes were revised.\n3.4.0 (2022-04-03) Break'n If ye had previously overwritten th' custom-footer.html partial t' add visual elements below th' rrrambl'n o' yer plank, ye have t' move this rrrambl'n t' th' new partial content-footer.html. custom-footer.html was never meant t' contain HTML other than additional styles an' JavaScript.\nNew If ye prefer expandable/collaps'ble menu items, ye can now set collapsibleMenu=true 'n yer config.toml. This will add arrows t' all menu items that contain sub menus. Th' menu will expand/collapse without navigat'n if ye click on an arrow.\nNew Ye can activate print support 'n yer config.toml t' add th' capability t' print whole chapters or even th' complete ship.\nNew Translat'n into Traditional Chinese.\n3.3.0 (2022-03-28) New Introduct'n o' new CSS variables t' set th' font. Th' theme distinguishes between --MAIN-font fer all rrrambl'n text an' --CODE-font fer inline or block code. There be additional overrides fer all head'ns. See th' theme variant generator o' th' exampleSite fer all avail'ble variables.\nNew Th' new shortcode swagger be avail'ble t' include a UI fer REST OpenAPI specificat'ns. See th' documentat'n fer avail'ble features. This feature will not work wit' Internet Explorer 11.\n3.2.0 (2022-03-19) 0.93.0 This release requires a newer Cap'n Hugo version.\nChange In this release th' Merrrmaid JavaScript library will only be boarded on demand if th' plank contains a Merrrmaid shortcode or be us'n Merrrmaid codefences. This changes th' behavior o' disableMermaid config opt'n as follows: If a Merrrmaid shortcode or codefence be found, th' opt'n will be ignored an' Merrrmaid will be boarded regardlessly.\nTh' opt'n be still useful 'n case ye be us'n script'n t' set up yer graph. In this case no shortcode or codefence be involved an' th' library be not boarded by default. In this case ye can set disableMermaid=false 'n yer frontmatter t' force th' library t' be boarded. See th' theme variant generator o' th' exampleSite fer an example.\nNew Additional color variant vari'ble --MERMAID-theme t' set th' variant’s Merrrmaid theme. This causes th' Merrrmaid theme t' switch wit' th' color variant if it defers from th' sett'n o' th' formerly selected color variant.\n3.1.0 (2022-03-15) New attachment an' notice shorrrtcodes have a new parameter t' override th' default ay'con. Allowed values be all Font Awesome 5 Free ay'cons. 3.0.0 (2022-02-22) Break'n We made changes t' th' menu footer. If ye have yer menu-footer.html partial overridden, ye may have t' review th' styl'n (eg. margins/paddings) 'n yer partial. For a reference take a look into th' menu-footer.html partial that be com'n wit' th' exampleSite.\nThis change was made t' allow yer own menu footer t' be placed right after th' so called prefooter that comes wit' th' theme (contain'n th' language switch an' Clear history functionality).\nBreak'n We have changed th' default colors from th' original Learrrn theme (the purple menu header) t' th' Relearrrn defaults (the light green menu header) as used 'n th' official documentat'n.\nThis change will only affect yer installat'n if you’ve not set th' themeVariant parameter 'n yer config.toml. If ye still want t' use th' Learrrn color variant, ye have t' explicitly set themeVariant=\"learn\" 'n yer config.toml.\nAvast, that this will also affect yer ship if viewed wit' Internet Explorer 11 but 'n this case it can not be reconfigured as Internet Explorer does not support CSS variables.\nChange Due t' a bug, that we couldn’t fix 'n a general manner fer color variants, we decided t' remove --MENU-SEARCH-BOX-ICONS-color an' introduced --MENU-SEARCH-color instead. Ye don’t need t' change anyth'n 'n yer custom color stylesheet as th' old name will be used as a fallback.\nChange For consistency reasons, we renamed --MENU-SEARCH-BOX-color t' --MENU-SEARCH-BORDER-color. Ye don’t need t' change anyth'n 'n yer custom color stylesheet as th' old name will be used as a fallback.\nNew Wit' this release ye be now cap'ble t' define yer own dark mode variants.\nT' make this poss'ble, we have introduced a lot more color variables ye can use 'n yer color variants. Yer old variants will still work an' don’t need t' be changed as appropriate fallback values be used by th' theme. Nevertheless, th' new colors allow fer much more customizat'n.\nT' see what’s now poss'ble, see th' new variants relearn-dark an' neon that be com'n wit' this release.\nNew T' make th' creat'n o' new variants easier fer ye, we’ve added a new interactive theme variant generator. This feature will not work wit' Internet Explorer 11.\nNew Ye can now configure multiple color variants 'n yer config.toml. In this case, th' first variant be th' default chosen on first view an' a variant selector will be shown 'n th' menu footer. See th' documentat'n fer configurat'n.\nAvast, that th' new variant selector will not work wit' Internet Explorer 11 as it does not support CSS variables. Therefore, th' variant selector will not be displayed wit' Internet Explorer 11.\n2.9.0 (2021-11-19) Break'n This release removes th' themes implementat'n o' ref/relref 'n favor fer Hugos standard implementat'n. This be because o' inconsistencies wit' th' themes implementat'n. In advantage, yer project becomes standard compliant an' exchang'n this theme 'n yer project t' some other theme will be effortless.\nIn a standard compliant form ye must not link t' th' *.md file but t' its logical name. You’ll see, referenc'n other planks becomes much easier. All three types result 'n th' same reference:\nType Non-Standard Standard Branch bundle basics/configuration/_index.md basics/configurat'n Leaf bundle basics/configuration/index.md basics/configurat'n Plank basics/configurat'n.md basics/configurat'n If you’ve linked from a plank o' one language t' a plank o' another language, conversion be a bit more difficult but Cap'n Hugo got ye covered as well.\nAlso, th' old themes implementat'n allowed refs t' non-exist'n rrrambl'n. This will cause Hugos implementat'n t' show th' error below an' abort th' generat'n. If yer project relies on this old behavior, ye can reconfigure th' error handl'n o' Hugos implementat'n.\nIn th' best case yer usage o' th' old implementat'n be already standard compliant an' ye don’t need t' change anyth'n. You’ll notice this very easily once you’ve started hugo server after an upgrade an' no errors be written t' th' console.\nYe may see errors on th' console after th' update 'n th' form:\nERROR 2021/11/19 22:29:10 [en] REF_NOT_FOUND: Ref \"basics/configuration/_index.md\": \"hugo-theme-relearn\\exampleSite\\content\\_index.en.md:19:22\": plank not foundIn this case, ye must apply one o' two opt'ns:\nStart up a text editor wit' regular expression support fer search an' replace. Search fer (ref\\s+\"[^\"]*?)(?:/_index|/index)?(?:\\.md)?(#[^\"]*?)?\" an' replace it by $1$2\" 'n all *.md files. This be th' recommended choice.\nCopy th' old implementat'n files theme/hugo-theme-relearn/layouts/shortcode/ref.html an' theme/hugo-theme-relearn/layouts/shortcode/relref.html t' yer own projects layouts/shortcode/ref.html an' layouts/shortcode/relref.html respectively. This be not recommended as yer project will still rely on non-standard behavior afterwards.\n2.8.0 (2021-11-03) Change Although never officially documented, this release removes th' font Novacento/Novecento. If ye use it 'n an overwritten CSS please replace it wit' Work Sans. This change was necessary as Novacento did not provide all Latin special characters an' lead t' mixed styled character text eg. fer Czech.\nNew Th' theme now supports favicons served from static/images/ named as favicon or logo 'n SVG, PNG or ICO format out o' th' box. An overridden partial layouts/partials/favicon.html may not be necessary anymore 'n most cases.\nNew Ye can hide th' t'ble o' contents menu fer th' whole ship by sett'n th' disableToc opt'n 'n yer config.toml. For an example see th' example configurat'n.\n2.7.0 (2021-10-24) New Optional second parameter fer notice shortcode t' set title 'n box header. 2.6.0 (2021-10-21) New Yer ship can now be served from a subfolder if ye set baseURL an' canonifyURLs=true 'n yer config.toml. See th' documentat'n fer a detailed example. 2.5.0 (2021-10-08) Change New colors --CODE-BLOCK-color an' --CODE-BLOCK-BG-color were added t' provide a fallback fer Hugos rules highlight'n 'n case guessSyntax=true be set. Ideally th' colors be set t' th' same values as th' ones from yer chosen chroma style. 2.4.0 (2021-10-07) Change Creat'n o' customized stylesheets was simplified down t' only contain th' CSS variables. Everyth'n else can an' should be deleted from yer custom stylesheet t' assure everyth'n works fine. For th' predefined stylesheet variants, this change be already included.\nNew Hidden planks be displayed by default 'n their accord'n tags plank. Ye can now turn off this behavior by sett'n disableTagHiddenPages=true 'n yer config.toml.\nNew Ye can define th' expansion state o' yer menus fer th' whole ship by sett'n th' alwaysopen opt'n 'n yer config.toml. Please see further documentat'n fer poss'ble values an' default behavior.\nNew New frontmatter ordersectionsby opt'n t' change immediate children sort'n 'n menu an' children shortcode. Poss'ble values be title or weight.\nNew Alternate rrrambl'n o' a plank be now advertised 'n th' HTML meta tags. See Cap'n Hugo documentat'n.\n2.3.0 (2021-09-13) 0.81.0 This release requires a newer Cap'n Hugo version.\nNew Showcase multilanguage features by provid'n a documentat'n translat'n “fer us pirrrates”. There will be no other translat'ns besides th' original English one an' th' Pirates one due t' maintenance constraints.\n2.2.0 (2021-09-09) New Hidden planks be displayed by default 'n th' sitemap generated by Cap'n Hugo an' be therefore vis'ble fer search engine index'n. Ye can now turn off this behavior by sett'n disableSeoHiddenPages=true 'n yer config.toml. 2.1.0 (2021-09-07) 0.69.0 This release requires a newer Cap'n Hugo version.\nChange In case th' site’s structure contains additional *.md files not part o' th' ship (eg files that be meant t' be included by ship planks - see CHANGELOG.md 'n th' exampleSite), they will now be ignored by th' search.\nNew Hidden planks be indexed fer th' ship search by default. Ye can now turn off this behavior by sett'n disableSearchHiddenPages=true 'n yer config.toml.\nNew If a search term be found 'n an expand shortcode, th' expand will be opened.\nNew Th' menu will scroll th' active item into view on board.\n2.0.0 (2021-08-28) Change Rules highlight'n was switched t' th' built 'n Hugo mechanism. Ye may need t' configure a new stylesheet or decide t' roll ye own as described on 'n th' Cap'n Hugo documentat'n\nChange In th' predefined stylesheets there was a typo an' --MENU-HOME-LINK-HOVERED-color must be changed t' --MENU-HOME-LINK-HOVER-color. Ye don’t need t' change anyth'n 'n yer custom color stylesheet as th' old name will be used as a fallback.\nChange --MENU-HOME-LINK-color an' --MENU-HOME-LINK-HOVER-color were miss'n 'n th' documentat'n. Ye should add them t' yer custom stylesheets if ye want t' override th' defaults.\nChange Arrow navigat'n an' children shortcode were ignor'n sett'n fer ordersectionsby. This be now changed an' may result 'n different sort'n order o' yer sub planks.\nChange If hidden planks be accessed directly by typ'n their URL, they will be exposed 'n th' menu.\nChange A plank without a title will be treated as hidden=true.\nNew Ye can define th' expansion state o' yer menus 'n th' frontmatter. Please see further documentat'n fer poss'ble values an' default behavior.\nNew New partials fer defin'n pre/post rrrambl'n fer menu items an' th' rrrambl'n. See documentat'n fer further read'n.\nNew Shortcode children wit' new parameter containerstyle.\nNew New shortcode include t' include arbitrary file rrrambl'n into a plank.\n1.2.0 (2021-07-26) New Shortcode expand wit' new parameter t' open on plank board. 1.1.0 (2021-07-02) Break'n Merrrmaid diagrams can now be panned an' zoomed. This isn’t configur'ble yet.\nNew Merrrmaid config opt'ns can be set 'n config.toml.\n1.0.0 (2021-07-01) 0.65.0 Th' requirement fer th' Cap'n Hugo version o' this theme be th' same as fer th' Learrrn theme version 2.5.0 on 2021-07-01.\nNew Initial fork o' th' Learrrn theme based on Learrrn 2.5.0 on 2021-07-01. This introduces no new features besides a global rename t' Relearrrn an' a new logo. For th' reasons behind fork'n th' Learrrn theme, see this comment 'n th' Learrrn issues.\n",
     "description": "",
     "tags": null,
     "title": "What's New",
@@ -138,7 +138,7 @@ var relearn_search_index = [
   },
   {
     "breadcrumb": "Basics",
-    "content": " On top o' Hugo’s global configurat'n opt'ns, th' Relearrrn theme lets ye define further opt'ns unique t' th' theme 'n yer config.toml. Th' defaults be written 'n th' comments o' each opt'n.\nAvast that some o' these opt'ns be explained 'n detail 'n other sections o' this documentat'n.\n​ config.toml [params] # If an opt'n value be said t' be not set, ye can achieve th' same behavior # by given it an empty str'n value. ############################################################################### # Cap'n Hugo # These opt'ns usually apply t' other themes aswell. # Th' author o' yer ship. # Default: not set # This will be used 'n HTML meta tags, th' opengraph protocol an' twitter # cards. # Ye can also set `author.email` if ye want t' publish this informat'n. author.name = \"Sören Weber\" # Th' social media image o' yer ship. # Default: not set # This be used fer generat'n social media meta informat'n fer th' opengraph # protocol an' twitter cards. # This can be overridden 'n th' page's frontmatter. images = [ \"images/hero.png\" ] # Th' descript'n o' yer ship. # Default: not set # This be used fer generat'n HTML meta tags, social media meta informat'n # fer th' opengraph protocol an' twitter cards. # This can be overridden 'n th' page's frontmatter. descript'n = \"Documentat'n fer Cap'n Hugo Relearrrn Theme\" # Admin opt'ns fer social media. # Default: not set # Configurat'n fer th' Open Graph protocol an' Twitter Cards adhere t' Hugo's # implementat'n. See th' Cap'n Hugo docs fer poss'ble values. social.facebook_admin = \"\" social.twitter = \"\" ############################################################################### # Relearrrn Theme # These opt'ns be specific t' th' Relearrrn theme. #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Variants # These opt'ns set yer color variant. # Used color variants. # Default: \"auto\" # This sets one or more color variants, avail'ble t' yer readers t' choose # from. Ye can # - set a single value eg. \"zen-light\" # - an array like [ \"neon\", \"learn\" ] # - an array wit' opt'ns like [ { identifier = \"neon\" },{ identifier = \"learn\" } ] # Th' last form allows t' set further opt'ns fer each variant. # Th' `identifier` be mandatory. Ye can also set `name` which overrides th' # value displayed 'n th' variant selector. # If th' array has more than one entry, a variant selector # be shown 'n th' lower part o' th' menu. Th' first entry 'n th' array be th' # default variant, used fer first time visitors. # Th' theme ships wit' th' follow'n variants: \"auto\", \"relearn-bright\", # \"relearn-light\", \"relearn-dark\", \"zen-light\", \"zen-dark\", \"neon\", \"learn\", # \"blue\", \"green\", \"red\". Th' auto variant be somewhat special. See th' # opt'n fer themeVariantAuto below. # Ye can also define yer own variants. See th' docs how this works. Also, # th' docs provide an interactive theme generator t' help ye wit' this task. themeVariant = [ { identifier = \"auto\" }, { identifier = \"relearn-light\" }, { identifier = \"relearn-dark\" }, { identifier = \"zen-light\" }, { identifier = \"zen-dark\" }, { identifier = \"neon\" }, { identifier = \"learn\" }, { identifier = \"blue\" }, { identifier = \"green\" }, { identifier = \"red\" } ] # Th' color variants used fer auto mode. # Default: [ \"relearn-light\", \"relearn-dark\" ], overwritten by th' first # two non-auto opt'ns o' yer `themeVariant` opt'n if present. # Th' auto variant defines how yer ship adjusts t' yer selected OS sett'ns # fer light/dark mode. Th' first array element be th' variant fer light mode, # th' second fer dark mode. themeVariantAuto = [ \"relearn-light\", \"relearn-dark\" ] #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # General # These opt'ns be defin'n general, non visual behavior. # Avoid new asset URLs on build. # Default: false # By default JavaScript-files an' CSS-files get a unique ID on each rebuild. # This makes sure, th' user always has th' latest version an' not some stale # copy o' his browser cache. Anyways, it can be desire'ble t' turn this # off 'n certain circumstances. For example if ye have Hugo's dev server # runn'n. Also some proxies dislike this optimizat'n. disableAssetsBust'n = false # Avoid generator meta tags. # Default: false # Set this t' true if ye want t' dis'ble generat'n fer generator meta tags # o' Cap'n Hugo an' th' theme 'n yer HTML head. In tihs case also don't forget t' # set Hugo's disableHugoGeneratorInject=true. Otherwise Cap'n Hugo will generate a # meta tag into yer home plank anyways. disableGeneratorVersion = false # Avoid unique IDs. # Default: false # In various situat'ns th' theme generates non st'ble unique ids t' be used # 'n HTML fragment links. This can be undesir'ble fer example when test'n # th' output fer changes. If ye dis'ble th' random id generat'n, th' theme # may not funct'n correctly anymore. disableRandomIds = false # Multilanguage rrrambl'n. # Default: not set # If yer planks contain further languages besides th' main one used, add all # those auxiliary languages here. This will create a search index wit' # support fer all used languages o' yer ship. # This be handy fer example if ye be writ'n 'n Spanish but have lots o' # source code on yer plank which typically uses English terminology. additionalContentLanguage = [ \"en\" ] # Additional code dependencies. # Default: See config.toml o' th' theme # Th' theme provides a mechanism t' board further JavaScript an' CSS # dependencies on demand only if they be needed. This comes 'n handy if ye # want t' add own shorrrtcodes that depend on additional code t' be boarded. # See th' docs how this works. # [relearn.dependencies] #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Topbar # These opt'ns modify th' topbar appearance. # Hide th' t'ble o' contents button. # Default: false # If th' TOC button be hidden, also th' keyboard shortcut be disabled. # This can be overridden 'n th' page's frontmatter. disableToc = false # Hide th' breadcrumbs. # Default: false # If th' breadcrumbs be hidden, th' title o' th' displayed plank will still be # shown 'n th' topbar. disableBreadcrumb = false # Hide Next an' Previous navigat'n buttons. # Default: false # If th' navigat'n buttons be hidden, also th' keyboard shortcuts be # disabled. disableNextPrev = false # Th' URL prefix t' edit a plank. # Default: not set # If set, an edit button will be shown 'n th' topbar. If th' button be hidden, # also th' keyboard shortcuts be disabled. Th' given URL be prepended t' th' # relative file path o' a th' displayed plank. Th' URL must end wit' a `/`. # This be useful if ye wnat t' give th' opportunity fer people t' create merge # request fer yer rrrambl'n. editURL = \"https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/\" #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Menu # These opt'ns modify th' menu apperance. # Hide th' search box. # Default: false # If th' searc box be sisabled, th' search functionality be disabled too. # This will also cause th' keyboard shortcut t' be disabled an' th' dedicated # search plank be not linked although it mighty be configured. disableSearch = false # Hide th' Home entry. # Default: false # If shown, a Home button will appear below th' search bar an' th' main menu. # It links t' yer th' home plank o' th' current language. disableLandingPageButton = true # Th' order o' main menu submenus. # Default: \"weight\" # Submenus can be ordered by \"weight\", \"title\", \"linktitle\", \"modifieddate\", # \"expirydate\", \"publishdate\", \"date\", \"length\" or \"default\" (adher'n t' # Hugo's default sort order). This can be overridden 'n th' planks frontmatter. ordersectionsby = \"weight\" # Th' initial expand state o' submenus. # Default: not set # This controls whether submenus will be expanded (true), or collapsed (false) # 'n th' menu. If not set, th' first menu level be set t' false, all others # levels be set t' true. This can be overridden 'n th' page's frontmatter. # If th' displayed plank has submenus, they will always been displayed expanded # regardless o' this opt'n. alwaysopen = \"\" # Shows expander fer submenus. # Default: false # If set t' true, a submenu 'n th' sidebar will be displayed 'n a collaps'ble # tree view an' a click'ble expander be set 'n front o' th' entry. collapsibleMenu = true # Shows checkmarks fer visited planks o' th' main menu. # Default: false # This also causes th' display o' th' `Clear History` entry 'n th' lower part # o' th' menu t' remove all checkmarks. Th' checkmarks will also been removed # if ye regenerate yer ship as th' ids be not st'ble. showVisitedLinks = true # Hide head'n above th' shortcut menu. # Default: false # Th' title fer th' head'n can be overwritten 'n yer i18n files. See Hugo's # documentat'n how t' do this. disableShortcutsTitle = false # Hide th' language switcher. # Default: false # If ye have more than one language configured, a language switcher be # displayed 'n th' lower part o' th' menu. This opit'n lets ye explicitly # turn this behavior off. disableLanguageSwitchingButton = false #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Hidden planks # These opt'ns configure how hidden planks be treated. # A plank flagged as hidden, be only removed from th' main menu but behaves # like any other plank fer all other functionality 'n Hugo. # Hide hidden planks from search. # Default: false # Hides hidden planks from th' suggest'ns o' th' search box an' th' dedicated # search plank. disableSearchHiddenPages = false # Hide hidden planks fer web crawlers. # Default: false # Avoids hidden planks from show'n up 'n th' sitemap an' on Google (et all), # otherwise they may be indexed by search engines disableSeoHiddenPages = true # Hide hidden planks fer taxonomies. # Default: false # Hides hidden planks from show'n up on th' taxonomy an' terms planks. If this # reduces term counters t' zero, an empty but not linked term plank will be # created anyhow. disableTagHiddenPages = false #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Rrrambl'n # These opt'ns modify how yer rrrambl'n be displayed. # Title separator. # Default: \"::\" # Changes th' title separator used when concatenat'n th' plank title wit' th' # ship title. This be consistently used throughout th' theme. titleSeparator = \"::\" # Breadcrumb separator. # Default: \"\u003e\" # Changes th' breadcrumb separator used 'n th' topbars breadcrumb area an' fer # search results an' term planks. breadcrumbSeparator = \"\u003e\" # Hide th' root breadcrumb. # Default: false # Th' root breadcrumb be usually th' home plank o' yer ship. Because this be # always access'ble by click'n on th' logo, ye may want t' reduce clutter # by remov'n this from yer breadcrumb. disableRootBreadcrumb = true # Hide breadcrumbs term planks. # Default: false # If ye have lots o' taxonomy terms, th' term planks may seem cluttered wit' # breadcrumbs t' ye, so this be th' opt'n t' turn off breadcrumbs on term # planks. Only th' plank title will then be shown on th' term planks. disableTermBreadcrumbs = false #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Highlight # These opt'ns configure how code be displayed. # Hide copy-to-clipboard fer inline code. # Default: false # This removes th' copy-to-clipboard button from yer inline code. disableInlineCopyToClipBoard = true # Always show copy-to-clipboard fer block code. # Default: false # Th' theme only shows th' copy-to-clipboard button if ye hover over th' code # block. Set this t' true t' dis'ble th' hover effect an' always show th' # button. disableHoverBlockCopyToClipBoard = false # Wrap fer code blocks. # Default: true # By default lines o' code blocks wrap around if th' line be too long t' be # displayed on screen. If ye dislike this behavior, ye can reconfigure it # here. # Avast that lines always wrap 'n print mode regardless o' this opt'n. # This can be overridden 'n th' page's frontmatter or given as a parameter t' # individual code blocks. highlightWrap = true #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Images # These opt'ns configure how images be displayed. # Image effects. # See th' documentat'n fer how ye can even add yer own arbitrary effects t' # th' list. # All effects can be overridden 'n th' page's frontmatter or thru URL parameter # given t' th' image. See th' documentat'n fer details. # Default: false imageEffects.border = true # Default: true imageEffects.lightbox = true # Default: false imageEffects.shadow = false #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Links # These opt'ns configure how links be displayed. # How t' open external links. # Default: \"_blank\" # For external links ye can define how they be opened 'n yer browser. All # values fer th' HTML `target` attribute o' th' `a` element be allowed. Th' # default value opens external links 'n a separate browser tab. If ye want # t' open those links 'n th' same tab, use \"_self\". externalLinkTarget = \"_blank\" # Generate link URLs th' Cap'n Hugo way. # Default: false # If set t' true, th' theme behaves like a standard Cap'n Hugo installat'n an' # appends no index.html t' prettyURLs. As a trade off, yer build project will # not be serv'ble from th' file system. disableExplicitIndexURLs = false #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Merrrmaid # These opt'ns configure how Merrrmaid graphs be displayed. # Make graphs pan'ble an' zoom'ble # Default: false # For huge graphs it can be helpful t' make them zoom'ble. Zoom'ble graphs come # wit' a reset button fer th' zoom. # This can be overridden 'n th' page's frontmatter or given as a parameter t' # individual graphs. mermaidZoom = true # Initializat'n opt'ns fer Merrrmaid. # Default: not set # A JSON value. See th' Merrrmaid documentat'n fer poss'ble parameter. # This can be overridden 'n th' page's frontmatter. mermaidInitialize = \"{ \\\"securityLevel\\\": \\\"loose\\\" }\" # Only board Merrrmaid if needed. # Default: true # If a Merrrmaid shortcode or codefence be found, th' opt'n will be ignored an' # Merrrmaid will be boarded regardlessly. Th' opt'n be still useful 'n case ye # be us'n script'n t' set up yer graph. In this case no shortcode or # codefence be involved an' th' library be not boarded by default. In this case # ye can set `disableMermaid=false` 'n yer frontmatter t' force th' library t' # be boarded. # This can be overridden 'n th' page's frontmatter. disableMermaid = true # URL fer external Merrrmaid library. # Default: not set # Specifies th' remote locat'n o' th' Merrrmaid library. By default th' shipped # version will be used. # This can be overridden 'n th' page's frontmatter. customMermaidURL = \"\" # \"https://unpkg.com/mermaid/dist/mermaid.min.js\" #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # MathJax # These opt'ns configure how math formulae be displayed. # Initializat'n opt'ns fer MathJax. # Default: not set # A JSON value. See th' MathJaxdocumentat'n fer poss'ble parameter. # This can be overridden 'n th' page's frontmatter. mathJaxInitialize = \"{}\" # Only board MathJax if needed. # Default: true # If a Math shortcode be found, th' opt'n will be ignored an' # MathJax will be boarded regardlessly. Th' opt'n be still useful 'n case ye # be us'n script'n t' set up yer graph. In this case no shortcode or # codefence be involved an' th' library be not boarded by default. In this case # ye can set `disableMathJax=false` 'n yer frontmatter t' force th' library t' # be boarded. # This can be overridden 'n th' page's frontmatter. disableMathJax = true # URL fer external MathJax library. # Default: not set # Specifies th' remote locat'n o' th' MathJax library. By default th' shipped # version will be used. # This can be overridden 'n th' page's frontmatter. customMathJaxURL = \"\" # \"https://unpkg.com/mathjax/es5/tex-mml-chtml.js\" #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # OpenApi # These opt'ns configure how OpenAPI specificat'ns be displayed. # Only board OpenAPI if needed. # Default: true # If a OpenAPI shortcode be found, th' opt'n will be ignored an' # OpenAPI will be boarded regardlessly. Th' opt'n be still useful 'n case ye # be us'n script'n t' set up yer graph. In this case no shortcode or # codefence be involved an' th' library be not boarded by default. In this case # ye can set `disableOpenapi=false` 'n yer frontmatter t' force th' library t' # be boarded. # This can be overridden 'n th' page's frontmatter. disableOpenapi = true # URL fer external OpenAPI library. # Default: not set # Specifies th' remote locat'n o' th' OpenAPI library. By default th' shipped # version will be used. # This can be overridden 'n th' page's frontmatter. customOpenapiURL = \"\" # \"https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js\" ",
+    "content": " On top o' Hugo’s global configurat'n opt'ns, th' Relearrrn theme lets ye define further opt'ns unique t' th' theme 'n yer config.toml. Th' defaults be written 'n th' comments o' each opt'n.\nAvast that some o' these opt'ns be explained 'n detail 'n other sections o' this documentat'n.\n​ config.toml [params] # If an opt'n value be said t' be not set, ye can achieve th' same behavior # by given it an empty str'n value. ############################################################################### # Cap'n Hugo # These opt'ns usually apply t' other themes aswell. # Th' author o' yer ship. # Default: not set # This will be used 'n HTML meta tags, th' opengraph protocol an' twitter # cards. # Ye can also set `author.email` if ye want t' publish this informat'n. author.name = \"Sören Weber\" # Th' social media image o' yer ship. # Default: not set # This be used fer generat'n social media meta informat'n fer th' opengraph # protocol an' twitter cards. # This can be overridden 'n th' page's frontmatter. images = [ \"images/hero.png\" ] # Th' descript'n o' yer ship. # Default: not set # This be used fer generat'n HTML meta tags, social media meta informat'n # fer th' opengraph protocol an' twitter cards. # This can be overridden 'n th' page's frontmatter. descript'n = \"Documentat'n fer Cap'n Hugo Relearrrn Theme\" # Admin opt'ns fer social media. # Default: not set # Configurat'n fer th' Open Graph protocol an' Twitter Cards adhere t' Hugo's # implementat'n. See th' Cap'n Hugo docs fer poss'ble values. social.facebook_admin = \"\" social.twitter = \"\" ############################################################################### # Relearrrn Theme # These opt'ns be specific t' th' Relearrrn theme. #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Variants # These opt'ns set yer color variant. # Used color variants. # Default: \"auto\" # This sets one or more color variants, avail'ble t' yer readers t' choose # from. Ye can # - set a single value eg. \"zen-light\" # - an array like [ \"neon\", \"learn\" ] # - an array wit' opt'ns like [ { identifier = \"neon\" },{ identifier = \"learn\" } ] # Th' last form allows t' set further opt'ns fer each variant. # Th' `identifier` be mandatory. Ye can also set `name` which overrides th' # value displayed 'n th' variant selector. # If th' array has more than one entry, a variant selector # be shown 'n th' lower part o' th' menu. Th' first entry 'n th' array be th' # default variant, used fer first time visitors. # Th' theme ships wit' th' follow'n variants: \"auto\", \"relearn-bright\", # \"relearn-light\", \"relearn-dark\", \"zen-light\", \"zen-dark\", \"neon\", \"learn\", # \"blue\", \"green\", \"red\". Th' auto variant be somewhat special. See th' # opt'n fer themeVariantAuto below. # Ye can also define yer own variants. See th' docs how this works. Also, # th' docs provide an interactive theme generator t' help ye wit' this task. themeVariant = [ { identifier = \"relearn-auto\", name = \"Relearn Light/Dark\", auto = [] }, { identifier = \"relearn-light\" }, { identifier = \"relearn-dark\" }, { identifier = \"relearn-bright\" }, { identifier = \"zen-auto\", name = \"Zen Light/Dark\", auto = [ \"zen-light\", \"zen-dark\" ] }, { identifier = \"zen-light\" }, { identifier = \"zen-dark\" }, { identifier = \"neon\" }, { identifier = \"learn\" }, { identifier = \"blue\" }, { identifier = \"green\" }, { identifier = \"red\" } ] #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # General # These opt'ns be defin'n general, non visual behavior. # Avoid new asset URLs on build. # Default: false # By default JavaScript-files an' CSS-files get a unique ID on each rebuild. # This makes sure, th' user always has th' latest version an' not some stale # copy o' his browser cache. Anyways, it can be desire'ble t' turn this # off 'n certain circumstances. For example if ye have Hugo's dev server # runn'n. Also some proxies dislike this optimizat'n. disableAssetsBust'n = false # Avoid generator meta tags. # Default: false # Set this t' true if ye want t' dis'ble generat'n fer generator meta tags # o' Cap'n Hugo an' th' theme 'n yer HTML head. In tihs case also don't forget t' # set Hugo's disableHugoGeneratorInject=true. Otherwise Cap'n Hugo will generate a # meta tag into yer home plank anyways. disableGeneratorVersion = false # Avoid unique IDs. # Default: false # In various situat'ns th' theme generates non st'ble unique ids t' be used # 'n HTML fragment links. This can be undesir'ble fer example when test'n # th' output fer changes. If ye dis'ble th' random id generat'n, th' theme # may not funct'n correctly anymore. disableRandomIds = false # Multilanguage rrrambl'n. # Default: not set # If yer planks contain further languages besides th' main one used, add all # those auxiliary languages here. This will create a search index wit' # support fer all used languages o' yer ship. # This be handy fer example if ye be writ'n 'n Spanish but have lots o' # source code on yer plank which typically uses English terminology. additionalContentLanguage = [ \"en\" ] # Additional code dependencies. # Default: See config.toml o' th' theme # Th' theme provides a mechanism t' board further JavaScript an' CSS # dependencies on demand only if they be needed. This comes 'n handy if ye # want t' add own shorrrtcodes that depend on additional code t' be boarded. # See th' docs how this works. # [relearn.dependencies] #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Topbar # These opt'ns modify th' topbar appearance. # Hide th' t'ble o' contents button. # Default: false # If th' TOC button be hidden, also th' keyboard shortcut be disabled. # This can be overridden 'n th' page's frontmatter. disableToc = false # Hide th' breadcrumbs. # Default: false # If th' breadcrumbs be hidden, th' title o' th' displayed plank will still be # shown 'n th' topbar. disableBreadcrumb = false # Hide Next an' Previous navigat'n buttons. # Default: false # If th' navigat'n buttons be hidden, also th' keyboard shortcuts be # disabled. disableNextPrev = false # Th' URL prefix t' edit a plank. # Default: not set # If set, an edit button will be shown 'n th' topbar. If th' button be hidden, # also th' keyboard shortcuts be disabled. Th' given URL be prepended t' th' # relative file path o' a th' displayed plank. Th' URL must end wit' a `/`. # This be useful if ye wnat t' give th' opportunity fer people t' create merge # request fer yer rrrambl'n. editURL = \"https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/\" #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Menu # These opt'ns modify th' menu apperance. # Hide th' search box. # Default: false # If th' searc box be sisabled, th' search functionality be disabled too. # This will also cause th' keyboard shortcut t' be disabled an' th' dedicated # search plank be not linked although it mighty be configured. disableSearch = false # Hide th' Home entry. # Default: false # If shown, a Home button will appear below th' search bar an' th' main menu. # It links t' yer th' home plank o' th' current language. disableLandingPageButton = true # Th' order o' main menu submenus. # Default: \"weight\" # Submenus can be ordered by \"weight\", \"title\", \"linktitle\", \"modifieddate\", # \"expirydate\", \"publishdate\", \"date\", \"length\" or \"default\" (adher'n t' # Hugo's default sort order). This can be overridden 'n th' planks frontmatter. ordersectionsby = \"weight\" # Th' initial expand state o' submenus. # Default: not set # This controls whether submenus will be expanded (true), or collapsed (false) # 'n th' menu. If not set, th' first menu level be set t' false, all others # levels be set t' true. This can be overridden 'n th' page's frontmatter. # If th' displayed plank has submenus, they will always been displayed expanded # regardless o' this opt'n. alwaysopen = \"\" # Shows expander fer submenus. # Default: false # If set t' true, a submenu 'n th' sidebar will be displayed 'n a collaps'ble # tree view an' a click'ble expander be set 'n front o' th' entry. collapsibleMenu = true # Shows checkmarks fer visited planks o' th' main menu. # Default: false # This also causes th' display o' th' `Clear History` entry 'n th' lower part # o' th' menu t' remove all checkmarks. Th' checkmarks will also been removed # if ye regenerate yer ship as th' ids be not st'ble. showVisitedLinks = true # Hide head'n above th' shortcut menu. # Default: false # Th' title fer th' head'n can be overwritten 'n yer i18n files. See Hugo's # documentat'n how t' do this. disableShortcutsTitle = false # Hide th' language switcher. # Default: false # If ye have more than one language configured, a language switcher be # displayed 'n th' lower part o' th' menu. This opit'n lets ye explicitly # turn this behavior off. disableLanguageSwitchingButton = false #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Hidden planks # These opt'ns configure how hidden planks be treated. # A plank flagged as hidden, be only removed from th' main menu but behaves # like any other plank fer all other functionality 'n Hugo. # Hide hidden planks from search. # Default: false # Hides hidden planks from th' suggest'ns o' th' search box an' th' dedicated # search plank. disableSearchHiddenPages = false # Hide hidden planks fer web crawlers. # Default: false # Avoids hidden planks from show'n up 'n th' sitemap an' on Google (et all), # otherwise they may be indexed by search engines disableSeoHiddenPages = true # Hide hidden planks fer taxonomies. # Default: false # Hides hidden planks from show'n up on th' taxonomy an' terms planks. If this # reduces term counters t' zero, an empty but not linked term plank will be # created anyhow. disableTagHiddenPages = false #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Rrrambl'n # These opt'ns modify how yer rrrambl'n be displayed. # Title separator. # Default: \"::\" # Changes th' title separator used when concatenat'n th' plank title wit' th' # ship title. This be consistently used throughout th' theme. titleSeparator = \"::\" # Breadcrumb separator. # Default: \"\u003e\" # Changes th' breadcrumb separator used 'n th' topbars breadcrumb area an' fer # search results an' term planks. breadcrumbSeparator = \"\u003e\" # Hide th' root breadcrumb. # Default: false # Th' root breadcrumb be usually th' home plank o' yer ship. Because this be # always access'ble by click'n on th' logo, ye may want t' reduce clutter # by remov'n this from yer breadcrumb. disableRootBreadcrumb = true # Hide breadcrumbs term planks. # Default: false # If ye have lots o' taxonomy terms, th' term planks may seem cluttered wit' # breadcrumbs t' ye, so this be th' opt'n t' turn off breadcrumbs on term # planks. Only th' plank title will then be shown on th' term planks. disableTermBreadcrumbs = false #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Highlight # These opt'ns configure how code be displayed. # Hide copy-to-clipboard fer inline code. # Default: false # This removes th' copy-to-clipboard button from yer inline code. disableInlineCopyToClipBoard = true # Always show copy-to-clipboard fer block code. # Default: false # Th' theme only shows th' copy-to-clipboard button if ye hover over th' code # block. Set this t' true t' dis'ble th' hover effect an' always show th' # button. disableHoverBlockCopyToClipBoard = false # Wrap fer code blocks. # Default: true # By default lines o' code blocks wrap around if th' line be too long t' be # displayed on screen. If ye dislike this behavior, ye can reconfigure it # here. # Avast that lines always wrap 'n print mode regardless o' this opt'n. # This can be overridden 'n th' page's frontmatter or given as a parameter t' # individual code blocks. highlightWrap = true #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Images # These opt'ns configure how images be displayed. # Image effects. # See th' documentat'n fer how ye can even add yer own arbitrary effects t' # th' list. # All effects can be overridden 'n th' page's frontmatter or thru URL parameter # given t' th' image. See th' documentat'n fer details. # Default: false imageEffects.border = true # Default: true imageEffects.lightbox = true # Default: false imageEffects.shadow = false #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Links # These opt'ns configure how links be displayed. # How t' open external links. # Default: \"_blank\" # For external links ye can define how they be opened 'n yer browser. All # values fer th' HTML `target` attribute o' th' `a` element be allowed. Th' # default value opens external links 'n a separate browser tab. If ye want # t' open those links 'n th' same tab, use \"_self\". externalLinkTarget = \"_blank\" # Generate link URLs th' Cap'n Hugo way. # Default: false # If set t' true, th' theme behaves like a standard Cap'n Hugo installat'n an' # appends no index.html t' prettyURLs. As a trade off, yer build project will # not be serv'ble from th' file system. disableExplicitIndexURLs = false #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Merrrmaid # These opt'ns configure how Merrrmaid graphs be displayed. # Make graphs pan'ble an' zoom'ble # Default: false # For huge graphs it can be helpful t' make them zoom'ble. Zoom'ble graphs come # wit' a reset button fer th' zoom. # This can be overridden 'n th' page's frontmatter or given as a parameter t' # individual graphs. mermaidZoom = true # Initializat'n opt'ns fer Merrrmaid. # Default: not set # A JSON value. See th' Merrrmaid documentat'n fer poss'ble parameter. # This can be overridden 'n th' page's frontmatter. mermaidInitialize = \"{ \\\"securityLevel\\\": \\\"loose\\\" }\" # Only board Merrrmaid if needed. # Default: true # If a Merrrmaid shortcode or codefence be found, th' opt'n will be ignored an' # Merrrmaid will be boarded regardlessly. Th' opt'n be still useful 'n case ye # be us'n script'n t' set up yer graph. In this case no shortcode or # codefence be involved an' th' library be not boarded by default. In this case # ye can set `disableMermaid=false` 'n yer frontmatter t' force th' library t' # be boarded. # This can be overridden 'n th' page's frontmatter. disableMermaid = true # URL fer external Merrrmaid library. # Default: not set # Specifies th' remote locat'n o' th' Merrrmaid library. By default th' shipped # version will be used. # This can be overridden 'n th' page's frontmatter. customMermaidURL = \"\" # \"https://unpkg.com/mermaid/dist/mermaid.min.js\" #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # MathJax # These opt'ns configure how math formulae be displayed. # Initializat'n opt'ns fer MathJax. # Default: not set # A JSON value. See th' MathJaxdocumentat'n fer poss'ble parameter. # This can be overridden 'n th' page's frontmatter. mathJaxInitialize = \"{}\" # Only board MathJax if needed. # Default: true # If a Math shortcode be found, th' opt'n will be ignored an' # MathJax will be boarded regardlessly. Th' opt'n be still useful 'n case ye # be us'n script'n t' set up yer graph. In this case no shortcode or # codefence be involved an' th' library be not boarded by default. In this case # ye can set `disableMathJax=false` 'n yer frontmatter t' force th' library t' # be boarded. # This can be overridden 'n th' page's frontmatter. disableMathJax = true # URL fer external MathJax library. # Default: not set # Specifies th' remote locat'n o' th' MathJax library. By default th' shipped # version will be used. # This can be overridden 'n th' page's frontmatter. customMathJaxURL = \"\" # \"https://unpkg.com/mathjax/es5/tex-mml-chtml.js\" #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # OpenApi # These opt'ns configure how OpenAPI specificat'ns be displayed. # Only board OpenAPI if needed. # Default: true # If a OpenAPI shortcode be found, th' opt'n will be ignored an' # OpenAPI will be boarded regardlessly. Th' opt'n be still useful 'n case ye # be us'n script'n t' set up yer graph. In this case no shortcode or # codefence be involved an' th' library be not boarded by default. In this case # ye can set `disableOpenapi=false` 'n yer frontmatter t' force th' library t' # be boarded. # This can be overridden 'n th' page's frontmatter. disableOpenapi = true # URL fer external OpenAPI library. # Default: not set # Specifies th' remote locat'n o' th' OpenAPI library. By default th' shipped # version will be used. # This can be overridden 'n th' page's frontmatter. customOpenapiURL = \"\" # \"https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js\" ",
     "description": "",
     "tags": [
       "config"
@@ -159,7 +159,7 @@ var relearn_search_index = [
   },
   {
     "breadcrumb": "Basics",
-    "content": " Th' Relearrrn theme provides configurat'n opt'ns t' change yer your site’s colors, favicon an' logo. This allows ye t' easily align yer ship visuals t' yer desired style. Most o' these opt'ns be exposed thru so called color variants.\nA color variant lets ye cust'mize various visual effects o' yer ship like almost any color, used fonts, color schemes o' print, rules highligtn'n, Merrrmaid an' th' OpenAPI shortcode, etc. It contains o' a CSS file an' optional configurat'n opt'ns 'n yer config.toml.\nTh' Relearrrn theme ships wit' a wide set o' different color variants. Ye can use them as-is, copy them over an' use them as a start'n point fer yer customizat'ns or just create completely new variants unique t' yer ship. Th' interactive variant generator may help ye wit' this task.\nOnce configured 'n yer config.toml, ye can select them wit' th' variant selector at th' bottom o' th' menu.\nChange th' Variant (Simple) Single Variant Set th' themeVariant value t' th' name o' yer theme file. That’s it! Yer ship will be displayed 'n this variant only.\n[params] themeVariant = \"relearn-light\" Avast Yer theme variant file must reside 'n yer site’s static/css directory or 'n th' theme’s static/css directory an' th' file name must start wit' theme- an' end wit .css. In th' above example, th' path o' yer theme file must be static/css/theme-relearn-light.css.\nIf ye want t' make changes t' a shipped color variant, create a copy 'n yer site’s static/css directory. Don’t edit th' file 'n th' theme’s directory!\nMultiple Variants Ye can also set multiple variants. In this case, th' first variant be th' default chosen on first view an' a variant selector will be shown 'n th' menu footer if th' array contains more than one entry.\n[params] themeVariant = [ \"relearn-light\", \"relearn-dark\" ] Smarrrt Arrrse Th' theme provides an advanced configurat'n mode, combin'n th' functionality fer multiple variants wit' th' below possibilities o' adjust'n t' yer OS sett'ns, logo an' rules highlightn'n an' even more!\nAlthough all opt'ns documented here be still work'n, th' advanced configurat'n opt'ns be th' recommended way t' configure yer color variants. See below.\nAdjust t' OS Sett'ns Ye can also cause th' ship t' adjust t' yer OS sett'ns fer light/dark mode. Just set th' themeVariant t' auto. That’s it.\nYe can use th' auto value wit' th' single or multiple variants opt'n. If ye be us'n multiple variants, ye can drop auto at any posit'n 'n th' option’s array, but usually it makes sense t' set it 'n th' first posit'n an' make it th' default.\n[params] themeVariant = [ \"auto\", \"red\" ]If ye don’t configure anyth'n else, th' theme will default t' use relearn-light fer light mode an' relearn-dark fer dark mode. These defaults be overwritten by th' first two non-auto opt'ns o' yer themeVariant opt'n if present.\nIn th' above example, ye would end wit' red fer light mode an' th' default o' relearn-dark fer dark mode.\nIf ye don’t like that behavior, ye can explicitly set themeVariantAuto. Th' first entry 'n th' array be th' color variant fer light mode, th' second fer dark mode.\n[params] themeVariantAuto = [ \"learn\", \"neon\" ]Change th' Favicon If yer favicon be a SVG, PNG or ICO, just drop yer image 'n yer site’s static/images/ directory an' name it favicon.svg, favicon.png or favicon.ico respectively.\nIf ye want t' adjust yer favicon accord'n t' yer OS sett'ns fer light/dark mode, add th' image files static/images/favicon-light.svg an' static/images/favicon-dark.svg t' yer site’s directory, respectively, correspond'n t' yer file format. In case some o' th' files be miss'n, th' theme falls back t' favicon.svg fer each miss'n file. All supplied favicons must be o' th' same file format.\nIf no favicon file be found, th' theme will lookup th' alternative filename logo 'n th' same locat'n an' will repeat th' search fer th' list o' supported file types.\nIf ye need t' change this default behavior, create a new file layouts/partials/favicon.html 'n yer site’s directory an' write someth'n like this:\n\u003clink rel=\"icon\" href=\"/images/favicon.bmp\" type=\"image/bmp\"\u003eChange th' Logo Create a new file 'n layouts/partials/logo.html o' yer ship. Then write any HTML ye want. Ye could use an img HTML tag an' reference an image created under th' static folder, or ye could paste a SVG definit'n!\nAvast Th' size o' th' logo will adapt automatically.\nRules highlightn'n If ye want t' switch th' rules highlight'n theme together wit' yer color variant, generate a rules highlight'n stylesheet an' configure yer installat'n accord'n t' Hugo’s documentat'n. Then, @import th' rules highlightn'n stylesheet 'n yer color variant stylesheet.\nFor an example, take a look into theme-relearn-light.css an' config.toml o' th' exampleSite.\nIf ye want t' reconfigure just th' rules highlight'n o' an exist'n color variant, ye need t' copy th' file t' yer site’s directory an' adjust it accordingly.\nChange th' Variant (Advanced) Th' theme offers a new way t' configure theme variants an' all o' th' aspects above inside o' a single configurat'n item. This comes wit' some features previously unsupported.\nLike wit' th' multiple variants opt'n, ye be defin'n yer theme variants 'n an array but now not by simple str'ns but 'n a t'ble wit' subopt'ns.\nAgain, 'n this case, th' first variant be th' default chosen on first view an' a variant selector will be shown 'n th' menu footer if th' array contains more than one entry.\n[params] themeVariant = [ \"relearn-light\", \"relearn-dark\" ]ye now write it that way:\n[params] [[params.themeVariant]] identifier = \"relearn-light\" [[params.themeVariant]] identifier = \"relearn-dark\"Th' identifier opt'n be mandatory an' equivalent t' th' str'n 'n th' first example. Further opt'ns can be configured, see th' t'ble below.\nParameter Name Default Notes identifier \u003cempty\u003e Must correspond t' th' name o' a color variant either 'n yer site’s or th' theme’s directory 'n th' form static/css/theme-\u003cIDENTIFIER\u003e.css. name see notes Th' name t' be displayed 'n th' variant selector. If not set, th' identifier be used 'n a human read'ble form. ",
+    "content": " Th' Relearrrn theme provides configurat'n opt'ns t' change yer your site’s colors, favicon an' logo. This allows ye t' easily align yer ship visuals t' yer desired style. Most o' these opt'ns be exposed thru so called color variants.\nA color variant lets ye cust'mize various visual effects o' yer ship like almost any color, used fonts, color schemes o' print, rules highligtn'n, Merrrmaid an' th' OpenAPI shortcode, etc. It contains o' a CSS file an' optional configurat'n opt'ns 'n yer config.toml.\nTh' Relearrrn theme ships wit' a wide set o' different color variants. Ye can use them as-is, copy them over an' use them as a start'n point fer yer customizat'ns or just create completely new variants unique t' yer ship. Th' interactive variant generator may help ye wit' this task.\nOnce configured 'n yer config.toml, ye can select them wit' th' variant selector at th' bottom o' th' menu.\nChange th' Variant (Simple) Single Variant Set th' themeVariant value t' th' name o' yer theme file. That’s it! Yer ship will be displayed 'n this variant only.\n[params] themeVariant = \"relearn-light\" Avast Yer theme variant file must reside 'n yer site’s static/css directory or 'n th' theme’s static/css directory an' th' file name must start wit' theme- an' end wit .css. In th' above example, th' path o' yer theme file must be static/css/theme-relearn-light.css.\nIf ye want t' make changes t' a shipped color variant, create a copy 'n yer site’s static/css directory. Don’t edit th' file 'n th' theme’s directory!\nMultiple Variants Ye can also set multiple variants. In this case, th' first variant be th' default chosen on first view an' a variant selector will be shown 'n th' menu footer if th' array contains more than one entry.\n[params] themeVariant = [ \"relearn-light\", \"relearn-dark\" ] Smarrrt Arrrse Th' theme provides an advanced configurat'n mode, combin'n th' functionality fer multiple variants wit' th' below possibilities o' adjust'n t' yer OS sett'ns, logo an' rules highlightn'n an' even more!\nAlthough all opt'ns documented here be still work'n, th' advanced configurat'n opt'ns be th' recommended way t' configure yer color variants. See below.\nAdjust t' OS Sett'ns Ye can also cause th' ship t' adjust t' yer OS sett'ns fer light/dark mode. Just set th' themeVariant t' auto t' become an auto mode variant. That’s it.\nYe can use th' auto value wit' th' single or multiple variants opt'n. If ye be us'n multiple variants, ye can drop auto at any posit'n 'n th' option’s array, but usually it makes sense t' set it 'n th' first posit'n an' make it th' default.\n[params] themeVariant = [ \"auto\", \"red\" ]If ye don’t configure anyth'n else, th' theme will default t' use relearn-light fer light mode an' relearn-dark fer dark mode. These defaults be overwritten by th' first two non-auto opt'ns o' yer themeVariant opt'n if present.\nIn th' above example, ye would end wit' red fer light mode an' th' default o' relearn-dark fer dark mode.\nIf ye don’t like that behavior, ye can explicitly set themeVariantAuto. Th' first entry 'n th' array be th' color variant fer light mode, th' second fer dark mode.\n[params] themeVariantAuto = [ \"learn\", \"neon\" ]Change th' Favicon If yer favicon be a SVG, PNG or ICO, just drop yer image 'n yer site’s static/images/ directory an' name it favicon.svg, favicon.png or favicon.ico respectively.\nIf ye want t' adjust yer favicon accord'n t' yer OS sett'ns fer light/dark mode, add th' image files static/images/favicon-light.svg an' static/images/favicon-dark.svg t' yer site’s directory, respectively, correspond'n t' yer file format. In case some o' th' files be miss'n, th' theme falls back t' favicon.svg fer each miss'n file. All supplied favicons must be o' th' same file format.\nIf no favicon file be found, th' theme will lookup th' alternative filename logo 'n th' same locat'n an' will repeat th' search fer th' list o' supported file types.\nIf ye need t' change this default behavior, create a new file layouts/partials/favicon.html 'n yer site’s directory an' write someth'n like this:\n\u003clink rel=\"icon\" href=\"/images/favicon.bmp\" type=\"image/bmp\"\u003eChange th' Logo Create a new file 'n layouts/partials/logo.html o' yer ship. Then write any HTML ye want. Ye could use an img HTML tag an' reference an image created under th' static folder, or ye could paste a SVG definit'n!\nAvast Th' size o' th' logo will adapt automatically.\nRules highlightn'n If ye want t' switch th' rules highlight'n theme together wit' yer color variant, generate a rules highlight'n stylesheet an' configure yer installat'n accord'n t' Hugo’s documentat'n. Then, @import th' rules highlightn'n stylesheet 'n yer color variant stylesheet.\nFor an example, take a look into theme-relearn-light.css an' config.toml o' th' exampleSite.\nIf ye want t' reconfigure just th' rules highlight'n o' an exist'n color variant, ye need t' copy th' file t' yer site’s directory an' adjust it accordingly.\nChange th' Variant (Advanced) Th' theme offers a new way t' configure theme variants an' all o' th' aspects above inside o' a single configurat'n item. This comes wit' some features previously unsupported.\nLike wit' th' multiple variants opt'n, ye be defin'n yer theme variants 'n an array but now not by simple str'ns but 'n a t'ble wit' subopt'ns.\nAgain, 'n this case, th' first variant be th' default chosen on first view an' a variant selector will be shown 'n th' menu footer if th' array contains more than one entry.\n[params] themeVariant = [ \"relearn-light\", \"relearn-dark\" ]ye now write it that way:\n[params] [[params.themeVariant]] identifier = \"relearn-light\" [[params.themeVariant]] identifier = \"relearn-dark\"Th' identifier opt'n be mandatory an' equivalent t' th' str'n 'n th' first example. Further opt'ns can be configured, see th' t'ble below.\nParameter Name Default Notes identifier \u003cempty\u003e Must correspond t' th' name o' a color variant either 'n yer site’s or th' theme’s directory 'n th' form static/css/theme-\u003cIDENTIFIER\u003e.css. name see notes Th' name t' be displayed 'n th' variant selector. If not set, th' identifier be used 'n a human read'ble form. auto \u003cempty\u003e If set, th' variant be treated as an auto mode variant. It has th' same behavior as th' themeVariantAuto opt'n. Th' first entry 'n th' array be th' color variant fer light mode, th' second fer dark mode. Defin'n auto mode variants wit' th' advanced opt'ns has th' benefit that ye can now have multiple auto mode variants instead o' just one wit' th' simple opt'ns. Example Configurat'n o' This Ship [params] [[params.themeVariant]] identifier = \"relearn-auto\" name = \"Relearn Light/Dark\" auto = [] [[params.themeVariant]] identifier = \"relearn-light\" [[params.themeVariant]] identifier = \"relearn-dark\" [[params.themeVariant]] identifier = \"zen-auto\" name = \"Zen Light/Dark\" auto = [ \"zen-light\", \"zen-dark\" ] [[params.themeVariant]] identifier = \"zen-light\" [[params.themeVariant]] identifier = \"zen-dark\" [[params.themeVariant]] identifier = \"neon\" ",
     "description": "",
     "tags": null,
     "title": "Brrrand'n",
diff --git a/pir/more/credits/index.html b/pir/more/credits/index.html
index fd96c11ed9..d421ced48b 100644
--- a/pir/more/credits/index.html
+++ b/pir/more/credits/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/more/credits/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/more/credits/index.xml" rel="alternate" type="application/rss+xml" title="Crrredits :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/more/credits/index.print.html" rel="alternate" type="text/html" title="Crrredits :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -286,12 +286,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../js/search.js?1700525735" defer></script>
+        <script src="../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -381,9 +381,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -448,13 +450,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/more/credits/index.print.html b/pir/more/credits/index.print.html
index d0891576e2..c0f0e3abf9 100644
--- a/pir/more/credits/index.print.html
+++ b/pir/more/credits/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/more/credits/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/more/credits/index.html" rel="canonical" type="text/html" title="Crrredits :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/more/credits/index.xml" rel="alternate" type="application/rss+xml" title="Crrredits :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -158,8 +158,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/search.html b/pir/search.html
index 278948e6a8..5ea613b886 100644
--- a/pir/search.html
+++ b/pir/search.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/search.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/search.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/search.html" rel="canonical" type="text/html" title="Searrrch :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../js/url.js?1700525735"></script>
-    <script src="../js/variant.js?1700525735"></script>
+    <link href="../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../js/url.js?1700697954"></script>
+    <script src="../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -205,12 +205,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1700525735" defer></script>
-        <script src="../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../js/search.js?1700525735" defer></script>
+        <script src="../js/auto-complete.js?1700697954" defer></script>
+        <script src="../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -300,9 +300,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -367,13 +369,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../js/github-buttons.js?1700525735"></script>
+          <script async src="../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../js/theme.js?1700525735" defer></script>
+    <script src="../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/attachments/index.html b/pir/shortcodes/attachments/index.html
index a3763625b2..d2254d877a 100644
--- a/pir/shortcodes/attachments/index.html
+++ b/pir/shortcodes/attachments/index.html
@@ -26,20 +26,20 @@ Attachments adivorciarsetoca00cape.pdf (361 KB) BachGavotteShort.mp3 (357 KB) Ca
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/attachments/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/attachments/index.xml" rel="alternate" type="application/rss+xml" title="Attachments :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/attachments/index.print.html" rel="alternate" type="text/html" title="Attachments :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -49,7 +49,7 @@ Attachments adivorciarsetoca00cape.pdf (361 KB) BachGavotteShort.mp3 (357 KB) Ca
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -497,12 +497,12 @@ Attachments adivorciarsetoca00cape.pdf (361 KB) BachGavotteShort.mp3 (357 KB) Ca
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../../js/search.js?1700525733" defer></script>
+        <script src="../../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -592,9 +592,11 @@ Attachments adivorciarsetoca00cape.pdf (361 KB) BachGavotteShort.mp3 (357 KB) Ca
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -659,13 +661,13 @@ Attachments adivorciarsetoca00cape.pdf (361 KB) BachGavotteShort.mp3 (357 KB) Ca
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/attachments/index.print.html b/pir/shortcodes/attachments/index.print.html
index 698d465347..eadccefbc8 100644
--- a/pir/shortcodes/attachments/index.print.html
+++ b/pir/shortcodes/attachments/index.print.html
@@ -26,21 +26,21 @@ Attachments adivorciarsetoca00cape.pdf (361 KB) BachGavotteShort.mp3 (357 KB) Ca
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/attachments/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/attachments/index.html" rel="canonical" type="text/html" title="Attachments :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/attachments/index.xml" rel="alternate" type="application/rss+xml" title="Attachments :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -50,7 +50,7 @@ Attachments adivorciarsetoca00cape.pdf (361 KB) BachGavotteShort.mp3 (357 KB) Ca
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -354,8 +354,8 @@ Attachments adivorciarsetoca00cape.pdf (361 KB) BachGavotteShort.mp3 (357 KB) Ca
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/badge/index.html b/pir/shortcodes/badge/index.html
index 6fe2a2ef45..5ff77cd40f 100644
--- a/pir/shortcodes/badge/index.html
+++ b/pir/shortcodes/badge/index.html
@@ -30,20 +30,20 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/badge/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/badge/index.xml" rel="alternate" type="application/rss+xml" title="Badge :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/badge/index.print.html" rel="alternate" type="text/html" title="Badge :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,7 +53,7 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -433,12 +433,12 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../../js/search.js?1700525734" defer></script>
+        <script src="../../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -528,9 +528,11 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -595,13 +597,13 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../../../js/theme.js?1700525734" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/badge/index.print.html b/pir/shortcodes/badge/index.print.html
index 1788aa1792..5159eee23e 100644
--- a/pir/shortcodes/badge/index.print.html
+++ b/pir/shortcodes/badge/index.print.html
@@ -30,21 +30,21 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/badge/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/badge/index.html" rel="canonical" type="text/html" title="Badge :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/badge/index.xml" rel="alternate" type="application/rss+xml" title="Badge :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,7 +54,7 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -297,8 +297,8 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/button/index.html b/pir/shortcodes/button/index.html
index 5741248c70..f6b3a54535 100644
--- a/pir/shortcodes/button/index.html
+++ b/pir/shortcodes/button/index.html
@@ -28,20 +28,20 @@ Get Cap&#39;n Hugo Get Cap&#39;n Hugo Usage While th&#39; examples be us&#39;n s
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/button/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/button/index.xml" rel="alternate" type="application/rss+xml" title="Button :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/button/index.print.html" rel="alternate" type="text/html" title="Button :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -51,7 +51,7 @@ Get Cap&#39;n Hugo Get Cap&#39;n Hugo Usage While th&#39; examples be us&#39;n s
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -571,12 +571,12 @@ Get Cap&#39;n Hugo Get Cap&#39;n Hugo Usage While th&#39; examples be us&#39;n s
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../../js/search.js?1700525734" defer></script>
+        <script src="../../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -666,9 +666,11 @@ Get Cap&#39;n Hugo Get Cap&#39;n Hugo Usage While th&#39; examples be us&#39;n s
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -733,13 +735,13 @@ Get Cap&#39;n Hugo Get Cap&#39;n Hugo Usage While th&#39; examples be us&#39;n s
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../../../js/theme.js?1700525734" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/button/index.print.html b/pir/shortcodes/button/index.print.html
index 68c4f4a2e6..8d08a1a505 100644
--- a/pir/shortcodes/button/index.print.html
+++ b/pir/shortcodes/button/index.print.html
@@ -28,21 +28,21 @@ Get Cap&#39;n Hugo Get Cap&#39;n Hugo Usage While th&#39; examples be us&#39;n s
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/button/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/button/index.html" rel="canonical" type="text/html" title="Button :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/button/index.xml" rel="alternate" type="application/rss+xml" title="Button :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -52,7 +52,7 @@ Get Cap&#39;n Hugo Get Cap&#39;n Hugo Usage While th&#39; examples be us&#39;n s
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -434,8 +434,8 @@ Get Cap&#39;n Hugo Get Cap&#39;n Hugo Usage While th&#39; examples be us&#39;n s
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html
index 6f27f768fc..5321f1125f 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
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../../../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../../../../../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../../../../../../../js/url.js?1700525733"></script>
-    <script src="../../../../../../../../../js/variant.js?1700525733"></script>
+    <link href="../../../../../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../../../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../../../../../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../../../../../../../js/url.js?1700697952"></script>
+    <script src="../../../../../../../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -235,12 +235,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../../../../../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../../../../../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../../../../../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../../../../../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../../../../../../../js/search.js?1700525735" defer></script>
+        <script src="../../../../../../../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../../../../../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../../../../../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../../../../../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../../../../../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../../../../../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -334,9 +334,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -401,13 +403,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../../../../../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../../../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../../../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../../../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../../../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../../../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html
index dee039005d..c345d3f187 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html
@@ -22,21 +22,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../../../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../../../../../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../../../../../../../js/url.js?1700525735"></script>
-    <script src="../../../../../../../../../js/variant.js?1700525735"></script>
+    <link href="../../../../../../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../../../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../../../../../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../../../../../../../js/url.js?1700697954"></script>
+    <script src="../../../../../../../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -115,8 +115,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../../../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../../../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../../../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../../../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../../../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html
index b22da24ab2..22633581ed 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
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../../../../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../../../../../../js/url.js?1700525733"></script>
-    <script src="../../../../../../../../js/variant.js?1700525733"></script>
+    <link href="../../../../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../../../../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../../../../../../js/url.js?1700697952"></script>
+    <script src="../../../../../../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -245,12 +245,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../../../../../../js/search.js?1700525735" defer></script>
+        <script src="../../../../../../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../../../../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -344,9 +344,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -411,13 +413,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../../../../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html
index 54c730375b..b4ba56b500 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html
@@ -22,21 +22,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../../../../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../../../../../../js/url.js?1700525735"></script>
-    <script src="../../../../../../../../js/variant.js?1700525735"></script>
+    <link href="../../../../../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../../../../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../../../../../../js/url.js?1700697954"></script>
+    <script src="../../../../../../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -142,8 +142,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html
index 9c5f1e8366..ea2628e04b 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
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1700525733"></script>
-    <script src="../../../../../../../js/variant.js?1700525733"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1700697952"></script>
+    <script src="../../../../../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -244,12 +244,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../../../../../js/search.js?1700525735" defer></script>
+        <script src="../../../../../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../../../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -341,9 +341,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -408,13 +410,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../../../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html
index 0af3c92206..23fbda7d88 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html
@@ -22,21 +22,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1700525735"></script>
-    <script src="../../../../../../../js/variant.js?1700525735"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1700697954"></script>
+    <script src="../../../../../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -122,8 +122,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html
index aad98748b0..2fe8829fff 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
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1700525733"></script>
-    <script src="../../../../../../js/variant.js?1700525733"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1700697952"></script>
+    <script src="../../../../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -243,12 +243,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../../../../js/search.js?1700525735" defer></script>
+        <script src="../../../../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -340,9 +340,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -407,13 +409,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html
index c1185812df..c071ce352d 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html
@@ -22,21 +22,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1700525735"></script>
-    <script src="../../../../../../js/variant.js?1700525735"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1700697954"></script>
+    <script src="../../../../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -149,8 +149,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html
index d89f90ab1f..c9fe384209 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
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.xml" rel="alternate" type="application/rss+xml" title="plank 1-1-2-1 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html" rel="alternate" type="text/html" title="plank 1-1-2-1 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1700525733"></script>
-    <script src="../../../../../../../js/variant.js?1700525733"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1700697952"></script>
+    <script src="../../../../../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -234,12 +234,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../../../../../js/search.js?1700525735" defer></script>
+        <script src="../../../../../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../../../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -329,9 +329,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -396,13 +398,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../../../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html
index 4c78a75aed..5c70592281 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" rel="canonical" type="text/html" title="plank 1-1-2-1 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.xml" rel="alternate" type="application/rss+xml" title="plank 1-1-2-1 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1700525735"></script>
-    <script src="../../../../../../../js/variant.js?1700525735"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1700697954"></script>
+    <script src="../../../../../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -114,8 +114,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html
index 9688b5cb9f..7b77cf6e85 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
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.xml" rel="alternate" type="application/rss+xml" title="plank 1-1-2-2 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html" rel="alternate" type="text/html" title="plank 1-1-2-2 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1700525733"></script>
-    <script src="../../../../../../../js/variant.js?1700525733"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1700697952"></script>
+    <script src="../../../../../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -234,12 +234,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../../../../../js/search.js?1700525735" defer></script>
+        <script src="../../../../../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../../../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -329,9 +329,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -396,13 +398,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../../../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html
index 78374c56a7..ae2e51094a 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" rel="canonical" type="text/html" title="plank 1-1-2-2 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.xml" rel="alternate" type="application/rss+xml" title="plank 1-1-2-2 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1700525735"></script>
-    <script src="../../../../../../../js/variant.js?1700525735"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1700697954"></script>
+    <script src="../../../../../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -114,8 +114,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html
index 420ae13090..1e965c36ac 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
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.xml" rel="alternate" type="application/rss+xml" title="plank 1-1-3 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html" rel="alternate" type="text/html" title="plank 1-1-3 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1700525733"></script>
-    <script src="../../../../../../js/variant.js?1700525733"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1700697952"></script>
+    <script src="../../../../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -233,12 +233,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../../../../js/search.js?1700525735" defer></script>
+        <script src="../../../../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -328,9 +328,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -395,13 +397,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html
index 818fa2f6d2..8df09f3810 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" rel="canonical" type="text/html" title="plank 1-1-3 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.xml" rel="alternate" type="application/rss+xml" title="plank 1-1-3 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1700525735"></script>
-    <script src="../../../../../../js/variant.js?1700525735"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1700697954"></script>
+    <script src="../../../../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -113,8 +113,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/index.html b/pir/shortcodes/children/children-1/children-1-1/index.html
index a7b30f1847..5cba293f17 100644
--- a/pir/shortcodes/children/children-1/children-1-1/index.html
+++ b/pir/shortcodes/children/children-1/children-1-1/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../pir/shortcodes/children/children-1/children-1-1/index.xml" rel="alternate" type="application/rss+xml" title="plank 1-1 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../pir/shortcodes/children/children-1/children-1-1/index.print.html" rel="alternate" type="text/html" title="plank 1-1 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../../../js/url.js?1700525733"></script>
-    <script src="../../../../../js/variant.js?1700525733"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../../../js/url.js?1700697952"></script>
+    <script src="../../../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -245,12 +245,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../../../js/search.js?1700525735" defer></script>
+        <script src="../../../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -340,9 +340,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -407,13 +409,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/index.print.html b/pir/shortcodes/children/children-1/children-1-1/index.print.html
index fe18e507e7..e02f1e5885 100644
--- a/pir/shortcodes/children/children-1/children-1-1/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.html" rel="canonical" type="text/html" title="plank 1-1 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../pir/shortcodes/children/children-1/children-1-1/index.xml" rel="alternate" type="application/rss+xml" title="plank 1-1 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../../../js/url.js?1700525735"></script>
-    <script src="../../../../../js/variant.js?1700525735"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../../../js/url.js?1700697954"></script>
+    <script src="../../../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -200,8 +200,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/index.html b/pir/shortcodes/children/children-1/index.html
index 97db629198..80c9ffd6d2 100644
--- a/pir/shortcodes/children/children-1/index.html
+++ b/pir/shortcodes/children/children-1/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../pir/shortcodes/children/children-1/index.xml" rel="alternate" type="application/rss+xml" title="plank 1 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../pir/shortcodes/children/children-1/index.print.html" rel="alternate" type="text/html" title="plank 1 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../../js/url.js?1700525733"></script>
-    <script src="../../../../js/variant.js?1700525733"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../../js/url.js?1700697952"></script>
+    <script src="../../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -242,12 +242,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../../js/search.js?1700525735" defer></script>
+        <script src="../../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -337,9 +337,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -404,13 +406,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/index.print.html b/pir/shortcodes/children/children-1/index.print.html
index 24c2f8b277..9d6d7a421c 100644
--- a/pir/shortcodes/children/children-1/index.print.html
+++ b/pir/shortcodes/children/children-1/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html" rel="canonical" type="text/html" title="plank 1 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../pir/shortcodes/children/children-1/index.xml" rel="alternate" type="application/rss+xml" title="plank 1 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../../js/url.js?1700525735"></script>
-    <script src="../../../../js/variant.js?1700525735"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../../js/url.js?1700697954"></script>
+    <script src="../../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -227,8 +227,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-2/index.html b/pir/shortcodes/children/children-2/index.html
index 0043ee74bc..3f940390c6 100644
--- a/pir/shortcodes/children/children-2/index.html
+++ b/pir/shortcodes/children/children-2/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../pir/shortcodes/children/children-2/index.xml" rel="alternate" type="application/rss+xml" title="plank 2 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../pir/shortcodes/children/children-2/index.print.html" rel="alternate" type="text/html" title="plank 2 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../../js/url.js?1700525733"></script>
-    <script src="../../../../js/variant.js?1700525733"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../../js/url.js?1700697952"></script>
+    <script src="../../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -232,12 +232,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../../js/search.js?1700525735" defer></script>
+        <script src="../../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -327,9 +327,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -394,13 +396,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-2/index.print.html b/pir/shortcodes/children/children-2/index.print.html
index d6774a4b05..3ec0cf9e14 100644
--- a/pir/shortcodes/children/children-2/index.print.html
+++ b/pir/shortcodes/children/children-2/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html" rel="canonical" type="text/html" title="plank 2 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../pir/shortcodes/children/children-2/index.xml" rel="alternate" type="application/rss+xml" title="plank 2 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../../js/url.js?1700525735"></script>
-    <script src="../../../../js/variant.js?1700525735"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../../js/url.js?1700697954"></script>
+    <script src="../../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -112,8 +112,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-3/index.html b/pir/shortcodes/children/children-3/index.html
index 60e42b7290..3976e630e5 100644
--- a/pir/shortcodes/children/children-3/index.html
+++ b/pir/shortcodes/children/children-3/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../pir/shortcodes/children/children-3/index.xml" rel="alternate" type="application/rss+xml" title="plank 3 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../pir/shortcodes/children/children-3/index.print.html" rel="alternate" type="text/html" title="plank 3 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../../js/url.js?1700525733"></script>
-    <script src="../../../../js/variant.js?1700525733"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../../js/url.js?1700697952"></script>
+    <script src="../../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -242,12 +242,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../../js/search.js?1700525735" defer></script>
+        <script src="../../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -337,9 +337,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -404,13 +406,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-3/index.print.html b/pir/shortcodes/children/children-3/index.print.html
index 31375c8209..b30cb29180 100644
--- a/pir/shortcodes/children/children-3/index.print.html
+++ b/pir/shortcodes/children/children-3/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html" rel="canonical" type="text/html" title="plank 3 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../pir/shortcodes/children/children-3/index.xml" rel="alternate" type="application/rss+xml" title="plank 3 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../../js/url.js?1700525735"></script>
-    <script src="../../../../js/variant.js?1700525735"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../../js/url.js?1700697954"></script>
+    <script src="../../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -139,8 +139,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-3/test3/index.html b/pir/shortcodes/children/children-3/test3/index.html
index 239b8f5926..23a456fed3 100644
--- a/pir/shortcodes/children/children-3/test3/index.html
+++ b/pir/shortcodes/children/children-3/test3/index.html
@@ -24,20 +24,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../pir/shortcodes/children/children-3/test3/index.xml" rel="alternate" type="application/rss+xml" title="plank 3-1 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../pir/shortcodes/children/children-3/test3/index.print.html" rel="alternate" type="text/html" title="plank 3-1 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../../../js/url.js?1700525733"></script>
-    <script src="../../../../../js/variant.js?1700525733"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../../../js/url.js?1700697952"></script>
+    <script src="../../../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -233,12 +233,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../../../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../../../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../../../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../../../../js/search.js?1700525734" defer></script>
+        <script src="../../../../../js/auto-complete.js?1700697953" defer></script>
+        <script src="../../../../../js/lunr/lunr.min.js?1700697953" defer></script>
+        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1700697953" defer></script>
+        <script src="../../../../../js/lunr/lunr.multi.min.js?1700697953" defer></script>
+        <script src="../../../../../js/lunr/lunr.en.min.js?1700697953" defer></script>
+        <script src="../../../../../js/search.js?1700697953" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -328,9 +328,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -395,13 +397,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../../../../js/github-buttons.js?1700697953"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../../../../../js/theme.js?1700525734" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1700697953" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1700697953" defer></script>
+    <script src="../../../../../js/theme.js?1700697953" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-3/test3/index.print.html b/pir/shortcodes/children/children-3/test3/index.print.html
index d13ba8e122..2a22ad88df 100644
--- a/pir/shortcodes/children/children-3/test3/index.print.html
+++ b/pir/shortcodes/children/children-3/test3/index.print.html
@@ -24,21 +24,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/index.html" rel="canonical" type="text/html" title="plank 3-1 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../pir/shortcodes/children/children-3/test3/index.xml" rel="alternate" type="application/rss+xml" title="plank 3-1 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../../../js/url.js?1700525735"></script>
-    <script src="../../../../../js/variant.js?1700525735"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../../../js/url.js?1700697954"></script>
+    <script src="../../../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -48,7 +48,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -113,8 +113,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-4/index.html b/pir/shortcodes/children/children-4/index.html
index c72d29a640..0a5c7c18d3 100644
--- a/pir/shortcodes/children/children-4/index.html
+++ b/pir/shortcodes/children/children-4/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-4/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-4/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-4/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../../js/url.js?1700525733"></script>
-    <script src="../../../../js/variant.js?1700525733"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../../js/url.js?1700697952"></script>
+    <script src="../../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -230,12 +230,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../../js/search.js?1700525735" defer></script>
+        <script src="../../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -326,9 +326,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -393,13 +395,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-4/index.print.html b/pir/shortcodes/children/children-4/index.print.html
index 9b2b33ff91..e4be88a463 100644
--- a/pir/shortcodes/children/children-4/index.print.html
+++ b/pir/shortcodes/children/children-4/index.print.html
@@ -22,21 +22,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-4/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-4/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-4/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../../js/url.js?1700525735"></script>
-    <script src="../../../../js/variant.js?1700525735"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../../js/url.js?1700697954"></script>
+    <script src="../../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -110,8 +110,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/index.html b/pir/shortcodes/children/index.html
index 903df83050..c0f3b02733 100644
--- a/pir/shortcodes/children/index.html
+++ b/pir/shortcodes/children/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/children/index.xml" rel="alternate" type="application/rss+xml" title="Children :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/children/index.print.html" rel="alternate" type="text/html" title="Children :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -429,12 +429,12 @@ So its rrrambl'n be used as descript'n.</p>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../js/search.js?1700525735" defer></script>
+        <script src="../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -524,9 +524,11 @@ So its rrrambl'n be used as descript'n.</p>
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -591,13 +593,13 @@ So its rrrambl'n be used as descript'n.</p>
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/index.print.html b/pir/shortcodes/children/index.print.html
index ade3a635e0..1046dee129 100644
--- a/pir/shortcodes/children/index.print.html
+++ b/pir/shortcodes/children/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/index.html" rel="canonical" type="text/html" title="Children :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/children/index.xml" rel="alternate" type="application/rss+xml" title="Children :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -514,8 +514,8 @@ So its rrrambl'n be used as descript'n.</p>
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/test/index.html b/pir/shortcodes/children/test/index.html
index aa9fb52343..b6786c63cb 100644
--- a/pir/shortcodes/children/test/index.html
+++ b/pir/shortcodes/children/test/index.html
@@ -27,20 +27,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/test/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../pir/shortcodes/children/test/index.xml" rel="alternate" type="application/rss+xml" title="plank X :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../pir/shortcodes/children/test/index.print.html" rel="alternate" type="text/html" title="plank X :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../../js/url.js?1700525733"></script>
-    <script src="../../../../js/variant.js?1700525733"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../../js/url.js?1700697952"></script>
+    <script src="../../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -50,7 +50,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -234,12 +234,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../../../js/search.js?1700525734" defer></script>
+        <script src="../../../../js/auto-complete.js?1700697953" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1700697953" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1700697953" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1700697953" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1700697953" defer></script>
+        <script src="../../../../js/search.js?1700697953" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -329,9 +329,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -396,13 +398,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../../../js/github-buttons.js?1700697953"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../../../../js/theme.js?1700525734" defer></script>
+    <script src="../../../../js/clipboard.min.js?1700697953" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1700697953" defer></script>
+    <script src="../../../../js/theme.js?1700697953" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/test/index.print.html b/pir/shortcodes/children/test/index.print.html
index af5723b989..0d7ce1490c 100644
--- a/pir/shortcodes/children/test/index.print.html
+++ b/pir/shortcodes/children/test/index.print.html
@@ -27,21 +27,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/test/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/test/index.html" rel="canonical" type="text/html" title="plank X :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../pir/shortcodes/children/test/index.xml" rel="alternate" type="application/rss+xml" title="plank X :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../../js/url.js?1700525735"></script>
-    <script src="../../../../js/variant.js?1700525735"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../../js/url.js?1700697954"></script>
+    <script src="../../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -51,7 +51,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -114,8 +114,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/expand/index.html b/pir/shortcodes/expand/index.html
index fd4db81f09..9ad5f4e3c9 100644
--- a/pir/shortcodes/expand/index.html
+++ b/pir/shortcodes/expand/index.html
@@ -40,20 +40,20 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/expand/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/expand/index.xml" rel="alternate" type="application/rss+xml" title="Expand :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/expand/index.print.html" rel="alternate" type="text/html" title="Expand :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -63,7 +63,7 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -169,13 +169,13 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
 <p>Th' <code>expand</code> shortcode displays an expandable/collaps'ble section o' text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="R-expand-85c5fd439b91c0001c52f7c5e8f98a3e" aria-controls="R-expandcontent-85c5fd439b91c0001c52f7c5e8f98a3e" >
-    <label class="expand-label" for="R-expand-85c5fd439b91c0001c52f7c5e8f98a3e" >
+    <input type="checkbox" id="R-expand-2d69097a91a09754069126b790aaffe5" aria-controls="R-expandcontent-2d69097a91a09754069126b790aaffe5" >
+    <label class="expand-label" for="R-expand-2d69097a91a09754069126b790aaffe5" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="R-expandcontent-85c5fd439b91c0001c52f7c5e8f98a3e" class="expand-content">
+    <div id="R-expandcontent-2d69097a91a09754069126b790aaffe5" class="expand-content">
 
 <p>Thank ye!</p>
 <p>That&rsquo;s some text wit' a footnote<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
@@ -293,26 +293,26 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
 <h3 id="all-defaults">All Defaults</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">ye</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="R-expand-54008516006ee9d5c2efc7092b8970d9" aria-controls="R-expandcontent-54008516006ee9d5c2efc7092b8970d9" >
-    <label class="expand-label" for="R-expand-54008516006ee9d5c2efc7092b8970d9" >
+    <input type="checkbox" id="R-expand-a6a8b1032d39ea4f2790c8bb1162cc61" aria-controls="R-expandcontent-a6a8b1032d39ea4f2790c8bb1162cc61" >
+    <label class="expand-label" for="R-expand-a6a8b1032d39ea4f2790c8bb1162cc61" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="R-expandcontent-54008516006ee9d5c2efc7092b8970d9" class="expand-content">
+    <div id="R-expandcontent-a6a8b1032d39ea4f2790c8bb1162cc61" class="expand-content">
 <p>
 Yes, ye did it!</div>
 </div>
 <h3 id="initially-expanded">Initially Expanded</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">t'</span> <span class="nx">press</span> <span class="nx">ye</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="R-expand-f476fd22f2aaeb91c49d8dc35761798f" aria-controls="R-expandcontent-f476fd22f2aaeb91c49d8dc35761798f"  checked>
-    <label class="expand-label" for="R-expand-f476fd22f2aaeb91c49d8dc35761798f" >
+    <input type="checkbox" id="R-expand-15f55032a4c084e63cd31f6e0813c4ba" aria-controls="R-expandcontent-15f55032a4c084e63cd31f6e0813c4ba"  checked>
+    <label class="expand-label" for="R-expand-15f55032a4c084e63cd31f6e0813c4ba" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="R-expandcontent-f476fd22f2aaeb91c49d8dc35761798f" class="expand-content">
+    <div id="R-expandcontent-15f55032a4c084e63cd31f6e0813c4ba" class="expand-content">
 <p>
 No need t' press ye!</div>
 </div>
@@ -333,13 +333,13 @@ No need t' press ye!</div>
 </span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">th'</span> <span class="nx">possibilities</span> <span class="nx">be</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">includ'n</span> <span class="nx">other</span> <span class="nx">shorrrtcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="R-expand-1cb8a376717ce8a146f71d163734b31f" aria-controls="R-expandcontent-1cb8a376717ce8a146f71d163734b31f" >
-    <label class="expand-label" for="R-expand-1cb8a376717ce8a146f71d163734b31f" >
+    <input type="checkbox" id="R-expand-01eaa0a7a73c0f942b36e49746bdff48" aria-controls="R-expandcontent-01eaa0a7a73c0f942b36e49746bdff48" >
+    <label class="expand-label" for="R-expand-01eaa0a7a73c0f942b36e49746bdff48" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show me almost <strong>endless</strong> possibilities
     </label>
-    <div id="R-expandcontent-1cb8a376717ce8a146f71d163734b31f" class="expand-content">
+    <div id="R-expandcontent-01eaa0a7a73c0f942b36e49746bdff48" class="expand-content">
 
 <p>Ye can add standard markdown rules:</p>
 <ul>
@@ -444,12 +444,12 @@ No need t' press ye!</div>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../../js/search.js?1700525733" defer></script>
+        <script src="../../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -539,9 +539,11 @@ No need t' press ye!</div>
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -606,13 +608,13 @@ No need t' press ye!</div>
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/expand/index.print.html b/pir/shortcodes/expand/index.print.html
index f7880cae24..42a4b7d1f7 100644
--- a/pir/shortcodes/expand/index.print.html
+++ b/pir/shortcodes/expand/index.print.html
@@ -40,21 +40,21 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/expand/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/expand/index.html" rel="canonical" type="text/html" title="Expand :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/expand/index.xml" rel="alternate" type="application/rss+xml" title="Expand :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -64,7 +64,7 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -114,13 +114,13 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
 <p>Th' <code>expand</code> shortcode displays an expandable/collaps'ble section o' text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="R-expand-85c5fd439b91c0001c52f7c5e8f98a3e" aria-controls="R-expandcontent-85c5fd439b91c0001c52f7c5e8f98a3e" >
-    <label class="expand-label" for="R-expand-85c5fd439b91c0001c52f7c5e8f98a3e" >
+    <input type="checkbox" id="R-expand-2d69097a91a09754069126b790aaffe5" aria-controls="R-expandcontent-2d69097a91a09754069126b790aaffe5" >
+    <label class="expand-label" for="R-expand-2d69097a91a09754069126b790aaffe5" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="R-expandcontent-85c5fd439b91c0001c52f7c5e8f98a3e" class="expand-content">
+    <div id="R-expandcontent-2d69097a91a09754069126b790aaffe5" class="expand-content">
 
 <p>Thank ye!</p>
 <p>That&rsquo;s some text wit' a footnote<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
@@ -238,26 +238,26 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
 <h3 id="all-defaults">All Defaults</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">ye</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="R-expand-54008516006ee9d5c2efc7092b8970d9" aria-controls="R-expandcontent-54008516006ee9d5c2efc7092b8970d9" >
-    <label class="expand-label" for="R-expand-54008516006ee9d5c2efc7092b8970d9" >
+    <input type="checkbox" id="R-expand-a6a8b1032d39ea4f2790c8bb1162cc61" aria-controls="R-expandcontent-a6a8b1032d39ea4f2790c8bb1162cc61" >
+    <label class="expand-label" for="R-expand-a6a8b1032d39ea4f2790c8bb1162cc61" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="R-expandcontent-54008516006ee9d5c2efc7092b8970d9" class="expand-content">
+    <div id="R-expandcontent-a6a8b1032d39ea4f2790c8bb1162cc61" class="expand-content">
 <p>
 Yes, ye did it!</div>
 </div>
 <h3 id="initially-expanded">Initially Expanded</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">t'</span> <span class="nx">press</span> <span class="nx">ye</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="R-expand-f476fd22f2aaeb91c49d8dc35761798f" aria-controls="R-expandcontent-f476fd22f2aaeb91c49d8dc35761798f"  checked>
-    <label class="expand-label" for="R-expand-f476fd22f2aaeb91c49d8dc35761798f" >
+    <input type="checkbox" id="R-expand-15f55032a4c084e63cd31f6e0813c4ba" aria-controls="R-expandcontent-15f55032a4c084e63cd31f6e0813c4ba"  checked>
+    <label class="expand-label" for="R-expand-15f55032a4c084e63cd31f6e0813c4ba" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="R-expandcontent-f476fd22f2aaeb91c49d8dc35761798f" class="expand-content">
+    <div id="R-expandcontent-15f55032a4c084e63cd31f6e0813c4ba" class="expand-content">
 <p>
 No need t' press ye!</div>
 </div>
@@ -278,13 +278,13 @@ No need t' press ye!</div>
 </span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">th'</span> <span class="nx">possibilities</span> <span class="nx">be</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">includ'n</span> <span class="nx">other</span> <span class="nx">shorrrtcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="R-expand-1cb8a376717ce8a146f71d163734b31f" aria-controls="R-expandcontent-1cb8a376717ce8a146f71d163734b31f" >
-    <label class="expand-label" for="R-expand-1cb8a376717ce8a146f71d163734b31f" >
+    <input type="checkbox" id="R-expand-01eaa0a7a73c0f942b36e49746bdff48" aria-controls="R-expandcontent-01eaa0a7a73c0f942b36e49746bdff48" >
+    <label class="expand-label" for="R-expand-01eaa0a7a73c0f942b36e49746bdff48" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show me almost <strong>endless</strong> possibilities
     </label>
-    <div id="R-expandcontent-1cb8a376717ce8a146f71d163734b31f" class="expand-content">
+    <div id="R-expandcontent-01eaa0a7a73c0f942b36e49746bdff48" class="expand-content">
 
 <p>Ye can add standard markdown rules:</p>
 <ul>
@@ -308,8 +308,8 @@ No need t' press ye!</div>
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/highlight/index.html b/pir/shortcodes/highlight/index.html
index f1bfbe0e81..6f731dc373 100644
--- a/pir/shortcodes/highlight/index.html
+++ b/pir/shortcodes/highlight/index.html
@@ -24,20 +24,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/highlight/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/highlight/index.xml" rel="alternate" type="application/rss+xml" title="Highlight :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/highlight/index.print.html" rel="alternate" type="text/html" title="Highlight :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -167,13 +167,13 @@
 <p>Th' <code>highlight</code> shortcode renders yer code wit' a rules highlighter.</p>
 
   
-<div class="tab-panel" data-tab-group="459682fd61d8d1248252c3168342ecb9">
+<div class="tab-panel" data-tab-group="0e0e0628e585b1a16960ff137d1d2a1e">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('459682fd61d8d1248252c3168342ecb9','python')"
+      onclick="switchTab('0e0e0628e585b1a16960ff137d1d2a1e','python')"
     >
       <span class="tab-nav-text">python</span>
     </button>
@@ -385,13 +385,13 @@
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>print(&#34;Hello World!&#34;)
 </span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
   
-<div class="tab-panel" data-tab-group="289e3afb743fa42d3841f222470a6ba3">
+<div class="tab-panel" data-tab-group="7b3428bb5c0972704dce47bef5cc0c12">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('289e3afb743fa42d3841f222470a6ba3','python')"
+      onclick="switchTab('7b3428bb5c0972704dce47bef5cc0c12','python')"
     >
       <span class="tab-nav-text">python</span>
     </button>
@@ -512,12 +512,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../../js/search.js?1700525734" defer></script>
+        <script src="../../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -607,9 +607,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -674,13 +676,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../../../js/theme.js?1700525734" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/highlight/index.print.html b/pir/shortcodes/highlight/index.print.html
index a16e2e9895..225f0ca4c5 100644
--- a/pir/shortcodes/highlight/index.print.html
+++ b/pir/shortcodes/highlight/index.print.html
@@ -24,21 +24,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/highlight/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/highlight/index.html" rel="canonical" type="text/html" title="Highlight :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/highlight/index.xml" rel="alternate" type="application/rss+xml" title="Highlight :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -48,7 +48,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -105,13 +105,13 @@
 <p>Th' <code>highlight</code> shortcode renders yer code wit' a rules highlighter.</p>
 
   
-<div class="tab-panel" data-tab-group="459682fd61d8d1248252c3168342ecb9">
+<div class="tab-panel" data-tab-group="0e0e0628e585b1a16960ff137d1d2a1e">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('459682fd61d8d1248252c3168342ecb9','python')"
+      onclick="switchTab('0e0e0628e585b1a16960ff137d1d2a1e','python')"
     >
       <span class="tab-nav-text">python</span>
     </button>
@@ -323,13 +323,13 @@
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>print(&#34;Hello World!&#34;)
 </span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
   
-<div class="tab-panel" data-tab-group="289e3afb743fa42d3841f222470a6ba3">
+<div class="tab-panel" data-tab-group="7b3428bb5c0972704dce47bef5cc0c12">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('289e3afb743fa42d3841f222470a6ba3','python')"
+      onclick="switchTab('7b3428bb5c0972704dce47bef5cc0c12','python')"
     >
       <span class="tab-nav-text">python</span>
     </button>
@@ -369,8 +369,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/icon/index.html b/pir/shortcodes/icon/index.html
index 9e72212592..db68273a6d 100644
--- a/pir/shortcodes/icon/index.html
+++ b/pir/shortcodes/icon/index.html
@@ -28,20 +28,20 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; positional parame
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/icon/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/icon/index.xml" rel="alternate" type="application/rss+xml" title="Icon :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/icon/index.print.html" rel="alternate" type="text/html" title="Icon :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -51,7 +51,7 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; positional parame
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -355,12 +355,12 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; positional parame
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../../js/search.js?1700525734" defer></script>
+        <script src="../../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -450,9 +450,11 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; positional parame
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -517,13 +519,13 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; positional parame
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../../../js/theme.js?1700525734" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/icon/index.print.html b/pir/shortcodes/icon/index.print.html
index 22cb5ca727..bbb0732cea 100644
--- a/pir/shortcodes/icon/index.print.html
+++ b/pir/shortcodes/icon/index.print.html
@@ -28,21 +28,21 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; positional parame
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/icon/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/icon/index.html" rel="canonical" type="text/html" title="Icon :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/icon/index.xml" rel="alternate" type="application/rss+xml" title="Icon :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -52,7 +52,7 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; positional parame
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -218,8 +218,8 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; positional parame
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/include/index.html b/pir/shortcodes/include/index.html
index 5c3c084790..e023d24109 100644
--- a/pir/shortcodes/include/index.html
+++ b/pir/shortcodes/include/index.html
@@ -28,20 +28,20 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/include/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/include/index.xml" rel="alternate" type="application/rss+xml" title="Include :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/include/index.print.html" rel="alternate" type="text/html" title="Include :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -51,7 +51,7 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -345,12 +345,12 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../../js/search.js?1700525734" defer></script>
+        <script src="../../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -440,9 +440,11 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -507,13 +509,13 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../../../js/theme.js?1700525734" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/include/index.print.html b/pir/shortcodes/include/index.print.html
index 02d9e150ca..e5cdb2a718 100644
--- a/pir/shortcodes/include/index.print.html
+++ b/pir/shortcodes/include/index.print.html
@@ -28,21 +28,21 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/include/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/include/index.html" rel="canonical" type="text/html" title="Include :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/include/index.xml" rel="alternate" type="application/rss+xml" title="Include :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -52,7 +52,7 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -211,8 +211,8 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/index.html b/pir/shortcodes/index.html
index 75adfbb2c5..8125bd3da0 100644
--- a/pir/shortcodes/index.html
+++ b/pir/shortcodes/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/index.html" rel="alternate" hreflang="pir">
     <link href="../../pir/shortcodes/index.xml" rel="alternate" type="application/rss+xml" title="Shorrrtcodes :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../pir/shortcodes/index.print.html" rel="alternate" type="text/html" title="Shorrrtcodes :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -246,12 +246,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../js/search.js?1700525735" defer></script>
+        <script src="../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -341,9 +341,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -408,13 +410,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../js/theme.js?1700525735" defer></script>
+    <script src="../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/index.print.html b/pir/shortcodes/index.print.html
index 840f93b542..467388cb1d 100644
--- a/pir/shortcodes/index.print.html
+++ b/pir/shortcodes/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/index.html" rel="canonical" type="text/html" title="Shorrrtcodes :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../pir/shortcodes/index.xml" rel="alternate" type="application/rss+xml" title="Shorrrtcodes :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../js/url.js?1700525735"></script>
-    <script src="../../js/variant.js?1700525735"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../js/url.js?1700697954"></script>
+    <script src="../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -1354,13 +1354,13 @@ So its rrrambl'n be used as descript'n.</p>
 <p>Th' <code>expand</code> shortcode displays an expandable/collaps'ble section o' text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="R-expand-85c5fd439b91c0001c52f7c5e8f98a3e" aria-controls="R-expandcontent-85c5fd439b91c0001c52f7c5e8f98a3e" >
-    <label class="expand-label" for="R-expand-85c5fd439b91c0001c52f7c5e8f98a3e" >
+    <input type="checkbox" id="R-expand-2d69097a91a09754069126b790aaffe5" aria-controls="R-expandcontent-2d69097a91a09754069126b790aaffe5" >
+    <label class="expand-label" for="R-expand-2d69097a91a09754069126b790aaffe5" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="R-expandcontent-85c5fd439b91c0001c52f7c5e8f98a3e" class="expand-content">
+    <div id="R-expandcontent-2d69097a91a09754069126b790aaffe5" class="expand-content">
 
 <p>Thank ye!</p>
 <p>That&rsquo;s some text wit' a footnote<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
@@ -1478,26 +1478,26 @@ So its rrrambl'n be used as descript'n.</p>
 <h3 id="all-defaults">All Defaults</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">ye</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="R-expand-54008516006ee9d5c2efc7092b8970d9" aria-controls="R-expandcontent-54008516006ee9d5c2efc7092b8970d9" >
-    <label class="expand-label" for="R-expand-54008516006ee9d5c2efc7092b8970d9" >
+    <input type="checkbox" id="R-expand-a6a8b1032d39ea4f2790c8bb1162cc61" aria-controls="R-expandcontent-a6a8b1032d39ea4f2790c8bb1162cc61" >
+    <label class="expand-label" for="R-expand-a6a8b1032d39ea4f2790c8bb1162cc61" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="R-expandcontent-54008516006ee9d5c2efc7092b8970d9" class="expand-content">
+    <div id="R-expandcontent-a6a8b1032d39ea4f2790c8bb1162cc61" class="expand-content">
 <p>
 Yes, ye did it!</div>
 </div>
 <h3 id="initially-expanded">Initially Expanded</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">t'</span> <span class="nx">press</span> <span class="nx">ye</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="R-expand-f476fd22f2aaeb91c49d8dc35761798f" aria-controls="R-expandcontent-f476fd22f2aaeb91c49d8dc35761798f"  checked>
-    <label class="expand-label" for="R-expand-f476fd22f2aaeb91c49d8dc35761798f" >
+    <input type="checkbox" id="R-expand-15f55032a4c084e63cd31f6e0813c4ba" aria-controls="R-expandcontent-15f55032a4c084e63cd31f6e0813c4ba"  checked>
+    <label class="expand-label" for="R-expand-15f55032a4c084e63cd31f6e0813c4ba" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="R-expandcontent-f476fd22f2aaeb91c49d8dc35761798f" class="expand-content">
+    <div id="R-expandcontent-15f55032a4c084e63cd31f6e0813c4ba" class="expand-content">
 <p>
 No need t' press ye!</div>
 </div>
@@ -1518,13 +1518,13 @@ No need t' press ye!</div>
 </span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">th'</span> <span class="nx">possibilities</span> <span class="nx">be</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">includ'n</span> <span class="nx">other</span> <span class="nx">shorrrtcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="R-expand-1cb8a376717ce8a146f71d163734b31f" aria-controls="R-expandcontent-1cb8a376717ce8a146f71d163734b31f" >
-    <label class="expand-label" for="R-expand-1cb8a376717ce8a146f71d163734b31f" >
+    <input type="checkbox" id="R-expand-01eaa0a7a73c0f942b36e49746bdff48" aria-controls="R-expandcontent-01eaa0a7a73c0f942b36e49746bdff48" >
+    <label class="expand-label" for="R-expand-01eaa0a7a73c0f942b36e49746bdff48" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show me almost <strong>endless</strong> possibilities
     </label>
-    <div id="R-expandcontent-1cb8a376717ce8a146f71d163734b31f" class="expand-content">
+    <div id="R-expandcontent-01eaa0a7a73c0f942b36e49746bdff48" class="expand-content">
 
 <p>Ye can add standard markdown rules:</p>
 <ul>
@@ -1561,13 +1561,13 @@ No need t' press ye!</div>
 <p>Th' <code>highlight</code> shortcode renders yer code wit' a rules highlighter.</p>
 
   
-<div class="tab-panel" data-tab-group="459682fd61d8d1248252c3168342ecb9">
+<div class="tab-panel" data-tab-group="0e0e0628e585b1a16960ff137d1d2a1e">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('459682fd61d8d1248252c3168342ecb9','python')"
+      onclick="switchTab('0e0e0628e585b1a16960ff137d1d2a1e','python')"
     >
       <span class="tab-nav-text">python</span>
     </button>
@@ -1779,13 +1779,13 @@ No need t' press ye!</div>
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>print(&#34;Hello World!&#34;)
 </span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
   
-<div class="tab-panel" data-tab-group="289e3afb743fa42d3841f222470a6ba3">
+<div class="tab-panel" data-tab-group="7b3428bb5c0972704dce47bef5cc0c12">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('289e3afb743fa42d3841f222470a6ba3','python')"
+      onclick="switchTab('7b3428bb5c0972704dce47bef5cc0c12','python')"
     >
       <span class="tab-nav-text">python</span>
     </button>
@@ -3307,7 +3307,7 @@ xychart-beta
 <div class="sc-openapi-wrapper is-load'n helper-loading-container">
   <div
     class="sc-openapi-container"
-    id="R-openapi-3c6d6fef1f208635634dddcbaf9ac09e"
+    id="R-openapi-f4e638418ab761fa8da5d3a2ecd1dc60"
     data-openapi-url="../../shortcodes/openapi/petstore.json"
   ></div>
 </div>
@@ -3405,13 +3405,13 @@ xychart-beta
 <p>T' use formatted parameter, add this 'n yer <code>config.toml</code>:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">marrrkup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">renderer</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">    <span class="nx">unsafe</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="d220d910840835e19afe01bfb277eed4">
+<div class="tab-panel" data-tab-group="ff289140590609a34cc0a3abafb2b2a7">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('d220d910840835e19afe01bfb277eed4','configtoml')"
+      onclick="switchTab('ff289140590609a34cc0a3abafb2b2a7','configtoml')"
     >
       <span class="tab-nav-text">config.toml</span>
     </button>
@@ -3445,13 +3445,13 @@ xychart-beta
 <p>This be especially useful if ye want t' flag yer code example wit' an explicit language.</p>
 <p>If ye want multiple tabs grouped together ye can wrap yer tabs into th' <a href="../../shortcodes/tabs/index.html"><code>tabs</code> shortcode</a>.</p>
 
-<div class="tab-panel" data-tab-group="db79a05e1d2a03c9bcf0bb49016361f2">
+<div class="tab-panel" data-tab-group="6fc04c8064a10370abdf9eb3a60166dd">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('db79a05e1d2a03c9bcf0bb49016361f2','c')"
+      onclick="switchTab('6fc04c8064a10370abdf9eb3a60166dd','c')"
     >
       <span class="tab-nav-text">c</span>
     </button>
@@ -3556,13 +3556,13 @@ xychart-beta
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="3c0f0bee5f99f3d16c75c794502c5484">
+<div class="tab-panel" data-tab-group="24da9486f5802e867bf1a821ff05dd5b">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="code"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('3c0f0bee5f99f3d16c75c794502c5484','code')"
+      onclick="switchTab('24da9486f5802e867bf1a821ff05dd5b','code')"
     >
       <span class="tab-nav-text">Code</span>
     </button>
@@ -3584,13 +3584,13 @@ xychart-beta
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="abb39aef556dce2260423c72cff1b992">
+<div class="tab-panel" data-tab-group="4685c4f85344783efeaea4fa574e8232">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="mixed"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('abb39aef556dce2260423c72cff1b992','mixed')"
+      onclick="switchTab('4685c4f85344783efeaea4fa574e8232','mixed')"
     >
       <span class="tab-nav-text"><em><strong>Mixed</strong></em></span>
     </button>
@@ -3635,41 +3635,41 @@ xychart-beta
 </span></span><span class="line"><span class="cl"><span class="nx">This</span> <span class="nx">will</span> <span class="nx">set</span> <span class="nx">th'</span> <span class="nx">background</span> <span class="nx">t'</span> <span class="nx">a</span> <span class="nx">lighter</span> <span class="nx">version</span> <span class="nx">o'</span> <span class="nx">th'</span> <span class="nx">chosen</span> <span class="nx">CSS</span> <span class="nx">color</span> <span class="nx">value</span> <span class="nx">an'</span> <span class="nx">also</span> <span class="nx">affects</span> <span class="nx">th'</span> <span class="nx">chosen</span> <span class="nx">ay'con</span><span class="p">.</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">&gt;}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="759cbcfcb44ab155fbc92025e3f78f2e">
+<div class="tab-panel" data-tab-group="3aea1cf40fbcded731d09141fd28cdd6">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="just-colored-style"
       class="tab-nav-button tab-panel-style cstyle blue active" tabindex="-1"
-      onclick="switchTab('759cbcfcb44ab155fbc92025e3f78f2e','just-colored-style')"
+      onclick="switchTab('3aea1cf40fbcded731d09141fd28cdd6','just-colored-style')"
     >
       <span class="tab-nav-text">just colored style</span>
     </button>
     <button
       data-tab-item="just-color"
       class="tab-nav-button tab-panel-style cstyle filled" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('759cbcfcb44ab155fbc92025e3f78f2e','just-color')"
+      onclick="switchTab('3aea1cf40fbcded731d09141fd28cdd6','just-color')"
     >
       <span class="tab-nav-text">just color</span>
     </button>
     <button
       data-tab-item="default-style-and-color"
       class="tab-nav-button tab-panel-style cstyle default" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('759cbcfcb44ab155fbc92025e3f78f2e','default-style-and-color')"
+      onclick="switchTab('3aea1cf40fbcded731d09141fd28cdd6','default-style-and-color')"
     >
       <span class="tab-nav-text">default style an' color</span>
     </button>
     <button
       data-tab-item="just-severity-stylefa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info"
-      onclick="switchTab('759cbcfcb44ab155fbc92025e3f78f2e','just-severity-stylefa-fw-fas-fa-info-circle')"
+      onclick="switchTab('3aea1cf40fbcded731d09141fd28cdd6','just-severity-stylefa-fw-fas-fa-info-circle')"
     >
       <span class="tab-nav-text"><i class="fa-fw fas fa-info-circle"></i> just severity style</span>
     </button>
     <button
       data-tab-item="severity-style-and-colorfa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('759cbcfcb44ab155fbc92025e3f78f2e','severity-style-and-colorfa-fw-fas-fa-info-circle')"
+      onclick="switchTab('3aea1cf40fbcded731d09141fd28cdd6','severity-style-and-colorfa-fw-fas-fa-info-circle')"
     >
       <span class="tab-nav-text"><i class="fa-fw fas fa-info-circle"></i> severity style an' color</span>
     </button>
@@ -3738,27 +3738,27 @@ xychart-beta
 <p>This comes 'n handy eg. fer provid'n code snippets fer multiple languages.</p>
 <p>If ye just want a single tab ye can instead call th' <a href="../../shortcodes/tab/index.html"><code>tab</code> shortcode</a> standalone.</p>
 
-<div class="tab-panel" data-tab-group="b076e63052eb8762a626938dac700e3d">
+<div class="tab-panel" data-tab-group="5b446ca8c1023a43b49614aaf3ed17d3">
   <div class="tab-nav">
     <div class="tab-nav-title">hello.</div>
     <button
       data-tab-item="py"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('b076e63052eb8762a626938dac700e3d','py')"
+      onclick="switchTab('5b446ca8c1023a43b49614aaf3ed17d3','py')"
     >
       <span class="tab-nav-text">py</span>
     </button>
     <button
       data-tab-item="sh"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('b076e63052eb8762a626938dac700e3d','sh')"
+      onclick="switchTab('5b446ca8c1023a43b49614aaf3ed17d3','sh')"
     >
       <span class="tab-nav-text">sh</span>
     </button>
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('b076e63052eb8762a626938dac700e3d','c')"
+      onclick="switchTab('5b446ca8c1023a43b49614aaf3ed17d3','c')"
     >
       <span class="tab-nav-text">c</span>
     </button>
@@ -3906,27 +3906,27 @@ xychart-beta
 <p>See what happens t' th' tab views while ye select different tabs.</p>
 <p>While press'n a tab o' Group A switches all tab views o' Group A 'n sync (if th' tab be available), th' tabs o' Group B be left untouched.</p>
 
-<div class="tab-panel" data-tab-group="06f0071caaab08061eb93f197af4ef3b">
+<div class="tab-panel" data-tab-group="4f448d50c3aaf13463c335f4d67f7387">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="group-a-tab-view-1"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('06f0071caaab08061eb93f197af4ef3b','group-a-tab-view-1')"
+      onclick="switchTab('4f448d50c3aaf13463c335f4d67f7387','group-a-tab-view-1')"
     >
       <span class="tab-nav-text">Group A, Tab View 1</span>
     </button>
     <button
       data-tab-item="group-a-tab-view-2"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('06f0071caaab08061eb93f197af4ef3b','group-a-tab-view-2')"
+      onclick="switchTab('4f448d50c3aaf13463c335f4d67f7387','group-a-tab-view-2')"
     >
       <span class="tab-nav-text">Group A, Tab View 2</span>
     </button>
     <button
       data-tab-item="group-b"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('06f0071caaab08061eb93f197af4ef3b','group-b')"
+      onclick="switchTab('4f448d50c3aaf13463c335f4d67f7387','group-b')"
     >
       <span class="tab-nav-text">Group B</span>
     </button>
@@ -4283,8 +4283,8 @@ xychart-beta
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525735" defer></script>
+    <script src="../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697954" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -4313,27 +4313,27 @@ xychart-beta
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1700525735"></script>
-    <script src="../../js/d3/d3-color.min.js?1700525735" defer></script>
-    <script src="../../js/d3/d3-dispatch.min.js?1700525735" defer></script>
-    <script src="../../js/d3/d3-drag.min.js?1700525735" defer></script>
-    <script src="../../js/d3/d3-ease.min.js?1700525735" defer></script>
-    <script src="../../js/d3/d3-interpolate.min.js?1700525735" defer></script>
-    <script src="../../js/d3/d3-selection.min.js?1700525735" defer></script>
-    <script src="../../js/d3/d3-timer.min.js?1700525735" defer></script>
-    <script src="../../js/d3/d3-transition.min.js?1700525735" defer></script>
-    <script src="../../js/d3/d3-zoom.min.js?1700525735" defer></script>
-    <script src="../../js/js-yaml.min.js?1700525735" defer></script>
-    <script src="../../js/mermaid.min.js?1700525735" defer></script>
+    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1700697954"></script>
+    <script src="../../js/d3/d3-color.min.js?1700697954" defer></script>
+    <script src="../../js/d3/d3-dispatch.min.js?1700697954" defer></script>
+    <script src="../../js/d3/d3-drag.min.js?1700697954" defer></script>
+    <script src="../../js/d3/d3-ease.min.js?1700697954" defer></script>
+    <script src="../../js/d3/d3-interpolate.min.js?1700697954" defer></script>
+    <script src="../../js/d3/d3-selection.min.js?1700697954" defer></script>
+    <script src="../../js/d3/d3-timer.min.js?1700697954" defer></script>
+    <script src="../../js/d3/d3-transition.min.js?1700697954" defer></script>
+    <script src="../../js/d3/d3-zoom.min.js?1700697954" defer></script>
+    <script src="../../js/js-yaml.min.js?1700697954" defer></script>
+    <script src="../../js/mermaid.min.js?1700697954" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
     <script>window.noZensmooth = true;</script>
-    <script src="../../js/swagger-ui/swagger-ui-bundle.js?1700525735" defer></script>
-    <script src="../../js/swagger-ui/swagger-ui-standalone-preset.js?1700525735" defer></script>
+    <script src="../../js/swagger-ui/swagger-ui-bundle.js?1700697954" defer></script>
+    <script src="../../js/swagger-ui/swagger-ui-standalone-preset.js?1700697954" defer></script>
     <script>
-      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1700525735", assetsBuster:  1700525735  };
+      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1700697954", assetsBuster:  1700697954  };
     </script>
-    <script src="../../js/theme.js?1700525735" defer></script>
+    <script src="../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/math/index.html b/pir/shortcodes/math/index.html
index 43fd402ad1..04344b57d5 100644
--- a/pir/shortcodes/math/index.html
+++ b/pir/shortcodes/math/index.html
@@ -30,20 +30,20 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter i
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/math/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/math/index.xml" rel="alternate" type="application/rss+xml" title="Math :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/math/index.print.html" rel="alternate" type="text/html" title="Math :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,7 +53,7 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter i
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -414,12 +414,12 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../../js/search.js?1700525734" defer></script>
+        <script src="../../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -509,9 +509,11 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -576,13 +578,13 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525734" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -611,7 +613,7 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="../../../js/mathjax/tex-mml-chtml.js?1700525734"></script>
-    <script src="../../../js/theme.js?1700525734" defer></script>
+    <script id="MathJax-script" async src="../../../js/mathjax/tex-mml-chtml.js?1700697952"></script>
+    <script src="../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/math/index.print.html b/pir/shortcodes/math/index.print.html
index 0556a537c8..5d26dcb841 100644
--- a/pir/shortcodes/math/index.print.html
+++ b/pir/shortcodes/math/index.print.html
@@ -30,21 +30,21 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter i
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/math/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/math/index.html" rel="canonical" type="text/html" title="Math :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/math/index.xml" rel="alternate" type="application/rss+xml" title="Math :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,7 +54,7 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter i
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -271,8 +271,8 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -301,7 +301,7 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="../../../js/mathjax/tex-mml-chtml.js?1700525735"></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script id="MathJax-script" async src="../../../js/mathjax/tex-mml-chtml.js?1700697954"></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/mermaid/index.html b/pir/shortcodes/mermaid/index.html
index 7318bdaac3..87ae4a686f 100644
--- a/pir/shortcodes/mermaid/index.html
+++ b/pir/shortcodes/mermaid/index.html
@@ -30,20 +30,20 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter i
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/mermaid/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/mermaid/index.xml" rel="alternate" type="application/rss+xml" title="Merrrmaid :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/mermaid/index.print.html" rel="alternate" type="text/html" title="Merrrmaid :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,7 +53,7 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter i
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -898,12 +898,12 @@ xychart-beta
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../../js/search.js?1700525734" defer></script>
+        <script src="../../../js/auto-complete.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697953" defer></script>
+        <script src="../../../js/search.js?1700697953" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -993,9 +993,11 @@ xychart-beta
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -1060,27 +1062,27 @@ xychart-beta
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../../js/github-buttons.js?1700697953"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../../../js/d3/d3-color.min.js?1700525734" defer></script>
-    <script src="../../../js/d3/d3-dispatch.min.js?1700525734" defer></script>
-    <script src="../../../js/d3/d3-drag.min.js?1700525734" defer></script>
-    <script src="../../../js/d3/d3-ease.min.js?1700525734" defer></script>
-    <script src="../../../js/d3/d3-interpolate.min.js?1700525734" defer></script>
-    <script src="../../../js/d3/d3-selection.min.js?1700525734" defer></script>
-    <script src="../../../js/d3/d3-timer.min.js?1700525734" defer></script>
-    <script src="../../../js/d3/d3-transition.min.js?1700525734" defer></script>
-    <script src="../../../js/d3/d3-zoom.min.js?1700525734" defer></script>
-    <script src="../../../js/js-yaml.min.js?1700525734" defer></script>
-    <script src="../../../js/mermaid.min.js?1700525734" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697953" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697953" defer></script>
+    <script src="../../../js/d3/d3-color.min.js?1700697953" defer></script>
+    <script src="../../../js/d3/d3-dispatch.min.js?1700697953" defer></script>
+    <script src="../../../js/d3/d3-drag.min.js?1700697953" defer></script>
+    <script src="../../../js/d3/d3-ease.min.js?1700697953" defer></script>
+    <script src="../../../js/d3/d3-interpolate.min.js?1700697953" defer></script>
+    <script src="../../../js/d3/d3-selection.min.js?1700697953" defer></script>
+    <script src="../../../js/d3/d3-timer.min.js?1700697953" defer></script>
+    <script src="../../../js/d3/d3-transition.min.js?1700697953" defer></script>
+    <script src="../../../js/d3/d3-zoom.min.js?1700697953" defer></script>
+    <script src="../../../js/js-yaml.min.js?1700697953" defer></script>
+    <script src="../../../js/mermaid.min.js?1700697953" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../../js/theme.js?1700525734" defer></script>
+    <script src="../../../js/theme.js?1700697953" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/mermaid/index.print.html b/pir/shortcodes/mermaid/index.print.html
index e25abc3d63..8674a9d823 100644
--- a/pir/shortcodes/mermaid/index.print.html
+++ b/pir/shortcodes/mermaid/index.print.html
@@ -30,21 +30,21 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter i
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/mermaid/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/mermaid/index.html" rel="canonical" type="text/html" title="Merrrmaid :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/mermaid/index.xml" rel="alternate" type="application/rss+xml" title="Merrrmaid :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,7 +54,7 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter i
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -743,22 +743,22 @@ xychart-beta
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/d3/d3-color.min.js?1700525735" defer></script>
-    <script src="../../../js/d3/d3-dispatch.min.js?1700525735" defer></script>
-    <script src="../../../js/d3/d3-drag.min.js?1700525735" defer></script>
-    <script src="../../../js/d3/d3-ease.min.js?1700525735" defer></script>
-    <script src="../../../js/d3/d3-interpolate.min.js?1700525735" defer></script>
-    <script src="../../../js/d3/d3-selection.min.js?1700525735" defer></script>
-    <script src="../../../js/d3/d3-timer.min.js?1700525735" defer></script>
-    <script src="../../../js/d3/d3-transition.min.js?1700525735" defer></script>
-    <script src="../../../js/d3/d3-zoom.min.js?1700525735" defer></script>
-    <script src="../../../js/js-yaml.min.js?1700525735" defer></script>
-    <script src="../../../js/mermaid.min.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/d3/d3-color.min.js?1700697954" defer></script>
+    <script src="../../../js/d3/d3-dispatch.min.js?1700697954" defer></script>
+    <script src="../../../js/d3/d3-drag.min.js?1700697954" defer></script>
+    <script src="../../../js/d3/d3-ease.min.js?1700697954" defer></script>
+    <script src="../../../js/d3/d3-interpolate.min.js?1700697954" defer></script>
+    <script src="../../../js/d3/d3-selection.min.js?1700697954" defer></script>
+    <script src="../../../js/d3/d3-timer.min.js?1700697954" defer></script>
+    <script src="../../../js/d3/d3-transition.min.js?1700697954" defer></script>
+    <script src="../../../js/d3/d3-zoom.min.js?1700697954" defer></script>
+    <script src="../../../js/js-yaml.min.js?1700697954" defer></script>
+    <script src="../../../js/mermaid.min.js?1700697954" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/notice/index.html b/pir/shortcodes/notice/index.html
index ecf6c29eed..1cae08847a 100644
--- a/pir/shortcodes/notice/index.html
+++ b/pir/shortcodes/notice/index.html
@@ -30,20 +30,20 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/notice/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/notice/index.xml" rel="alternate" type="application/rss+xml" title="Notice :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/notice/index.print.html" rel="alternate" type="text/html" title="Notice :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,7 +53,7 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -578,12 +578,12 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../../js/search.js?1700525734" defer></script>
+        <script src="../../../js/auto-complete.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697953" defer></script>
+        <script src="../../../js/search.js?1700697953" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -673,9 +673,11 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -740,13 +742,13 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../../js/github-buttons.js?1700697953"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../../../js/theme.js?1700525734" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697953" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697953" defer></script>
+    <script src="../../../js/theme.js?1700697953" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/notice/index.print.html b/pir/shortcodes/notice/index.print.html
index 8cab1aed3e..a23950d96f 100644
--- a/pir/shortcodes/notice/index.print.html
+++ b/pir/shortcodes/notice/index.print.html
@@ -30,21 +30,21 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/notice/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/notice/index.html" rel="canonical" type="text/html" title="Notice :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/notice/index.xml" rel="alternate" type="application/rss+xml" title="Notice :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,7 +54,7 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -440,8 +440,8 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/openapi/index.html b/pir/shortcodes/openapi/index.html
index 63e2f7ae73..914687476a 100644
--- a/pir/shortcodes/openapi/index.html
+++ b/pir/shortcodes/openapi/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/openapi/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/openapi/index.xml" rel="alternate" type="application/rss+xml" title="OpenAPI :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/openapi/index.print.html" rel="alternate" type="text/html" title="OpenAPI :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -229,7 +229,7 @@
 <div class="sc-openapi-wrapper is-load'n helper-loading-container">
   <div
     class="sc-openapi-container"
-    id="R-openapi-3c6d6fef1f208635634dddcbaf9ac09e"
+    id="R-openapi-f4e638418ab761fa8da5d3a2ecd1dc60"
     data-openapi-url="../../../shortcodes/openapi/petstore.json"
   ></div>
 </div>
@@ -323,12 +323,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../js/search.js?1700525735" defer></script>
+        <script src="../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -418,9 +418,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -485,19 +487,19 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
     <script>window.noZensmooth = true;</script>
-    <script src="../../../js/swagger-ui/swagger-ui-bundle.js?1700525735" defer></script>
-    <script src="../../../js/swagger-ui/swagger-ui-standalone-preset.js?1700525735" defer></script>
+    <script src="../../../js/swagger-ui/swagger-ui-bundle.js?1700697954" defer></script>
+    <script src="../../../js/swagger-ui/swagger-ui-standalone-preset.js?1700697954" defer></script>
     <script>
-      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1700525735", assetsBuster:  1700525735  };
+      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1700697954", assetsBuster:  1700697954  };
     </script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/openapi/index.print.html b/pir/shortcodes/openapi/index.print.html
index 6bf5950076..fff5f1ba8d 100644
--- a/pir/shortcodes/openapi/index.print.html
+++ b/pir/shortcodes/openapi/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/openapi/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/openapi/index.html" rel="canonical" type="text/html" title="OpenAPI :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/openapi/index.xml" rel="alternate" type="application/rss+xml" title="OpenAPI :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -176,7 +176,7 @@
 <div class="sc-openapi-wrapper is-load'n helper-loading-container">
   <div
     class="sc-openapi-container"
-    id="R-openapi-3c6d6fef1f208635634dddcbaf9ac09e"
+    id="R-openapi-f4e638418ab761fa8da5d3a2ecd1dc60"
     data-openapi-url="../../../shortcodes/openapi/petstore.json"
   ></div>
 </div>
@@ -189,14 +189,14 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
     <script>window.noZensmooth = true;</script>
-    <script src="../../../js/swagger-ui/swagger-ui-bundle.js?1700525735" defer></script>
-    <script src="../../../js/swagger-ui/swagger-ui-standalone-preset.js?1700525735" defer></script>
+    <script src="../../../js/swagger-ui/swagger-ui-bundle.js?1700697954" defer></script>
+    <script src="../../../js/swagger-ui/swagger-ui-standalone-preset.js?1700697954" defer></script>
     <script>
-      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1700525735", assetsBuster:  1700525735  };
+      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1700697954", assetsBuster:  1700697954  };
     </script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/siteparam/index.html b/pir/shortcodes/siteparam/index.html
index d0ae67a350..f20690377b 100644
--- a/pir/shortcodes/siteparam/index.html
+++ b/pir/shortcodes/siteparam/index.html
@@ -28,20 +28,20 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/siteparam/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/siteparam/index.xml" rel="alternate" type="application/rss+xml" title="SiteParam :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/siteparam/index.print.html" rel="alternate" type="text/html" title="SiteParam :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -51,7 +51,7 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -235,13 +235,13 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
 <p>T' use formatted parameter, add this 'n yer <code>config.toml</code>:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">marrrkup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">renderer</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">    <span class="nx">unsafe</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="d220d910840835e19afe01bfb277eed4">
+<div class="tab-panel" data-tab-group="ff289140590609a34cc0a3abafb2b2a7">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('d220d910840835e19afe01bfb277eed4','configtoml')"
+      onclick="switchTab('ff289140590609a34cc0a3abafb2b2a7','configtoml')"
     >
       <span class="tab-nav-text">config.toml</span>
     </button>
@@ -349,12 +349,12 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../../js/search.js?1700525734" defer></script>
+        <script src="../../../js/auto-complete.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697953" defer></script>
+        <script src="../../../js/search.js?1700697953" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -444,9 +444,11 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -511,13 +513,13 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../../js/github-buttons.js?1700697953"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../../../js/theme.js?1700525734" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697953" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697953" defer></script>
+    <script src="../../../js/theme.js?1700697953" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/siteparam/index.print.html b/pir/shortcodes/siteparam/index.print.html
index 6a9c82b465..e0bd5247eb 100644
--- a/pir/shortcodes/siteparam/index.print.html
+++ b/pir/shortcodes/siteparam/index.print.html
@@ -28,21 +28,21 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/siteparam/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/siteparam/index.html" rel="canonical" type="text/html" title="SiteParam :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/siteparam/index.xml" rel="alternate" type="application/rss+xml" title="SiteParam :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -52,7 +52,7 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -181,13 +181,13 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
 <p>T' use formatted parameter, add this 'n yer <code>config.toml</code>:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">marrrkup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">renderer</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">    <span class="nx">unsafe</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="d220d910840835e19afe01bfb277eed4">
+<div class="tab-panel" data-tab-group="ff289140590609a34cc0a3abafb2b2a7">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('d220d910840835e19afe01bfb277eed4','configtoml')"
+      onclick="switchTab('ff289140590609a34cc0a3abafb2b2a7','configtoml')"
     >
       <span class="tab-nav-text">config.toml</span>
     </button>
@@ -214,8 +214,8 @@ Usage While th&#39; examples be us&#39;n shorrrtcodes wit&#39; named parameter y
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/tab/index.html b/pir/shortcodes/tab/index.html
index a30bd1dbf5..f96bab74e2 100644
--- a/pir/shortcodes/tab/index.html
+++ b/pir/shortcodes/tab/index.html
@@ -30,20 +30,20 @@ If ye want multiple tabs grouped together ye can wrap yer tabs into th&#39; tabs
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tab/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/tab/index.xml" rel="alternate" type="application/rss+xml" title="Tab :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/tab/index.print.html" rel="alternate" type="text/html" title="Tab :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,7 +53,7 @@ If ye want multiple tabs grouped together ye can wrap yer tabs into th&#39; tabs
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -160,13 +160,13 @@ If ye want multiple tabs grouped together ye can wrap yer tabs into th&#39; tabs
 <p>This be especially useful if ye want t' flag yer code example wit' an explicit language.</p>
 <p>If ye want multiple tabs grouped together ye can wrap yer tabs into th' <a href="../../../shortcodes/tabs/index.html"><code>tabs</code> shortcode</a>.</p>
 
-<div class="tab-panel" data-tab-group="db79a05e1d2a03c9bcf0bb49016361f2">
+<div class="tab-panel" data-tab-group="6fc04c8064a10370abdf9eb3a60166dd">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('db79a05e1d2a03c9bcf0bb49016361f2','c')"
+      onclick="switchTab('6fc04c8064a10370abdf9eb3a60166dd','c')"
     >
       <span class="tab-nav-text">c</span>
     </button>
@@ -271,13 +271,13 @@ If ye want multiple tabs grouped together ye can wrap yer tabs into th&#39; tabs
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="3c0f0bee5f99f3d16c75c794502c5484">
+<div class="tab-panel" data-tab-group="24da9486f5802e867bf1a821ff05dd5b">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="code"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('3c0f0bee5f99f3d16c75c794502c5484','code')"
+      onclick="switchTab('24da9486f5802e867bf1a821ff05dd5b','code')"
     >
       <span class="tab-nav-text">Code</span>
     </button>
@@ -299,13 +299,13 @@ If ye want multiple tabs grouped together ye can wrap yer tabs into th&#39; tabs
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="abb39aef556dce2260423c72cff1b992">
+<div class="tab-panel" data-tab-group="4685c4f85344783efeaea4fa574e8232">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="mixed"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('abb39aef556dce2260423c72cff1b992','mixed')"
+      onclick="switchTab('4685c4f85344783efeaea4fa574e8232','mixed')"
     >
       <span class="tab-nav-text"><em><strong>Mixed</strong></em></span>
     </button>
@@ -350,41 +350,41 @@ If ye want multiple tabs grouped together ye can wrap yer tabs into th&#39; tabs
 </span></span><span class="line"><span class="cl"><span class="nx">This</span> <span class="nx">will</span> <span class="nx">set</span> <span class="nx">th'</span> <span class="nx">background</span> <span class="nx">t'</span> <span class="nx">a</span> <span class="nx">lighter</span> <span class="nx">version</span> <span class="nx">o'</span> <span class="nx">th'</span> <span class="nx">chosen</span> <span class="nx">CSS</span> <span class="nx">color</span> <span class="nx">value</span> <span class="nx">an'</span> <span class="nx">also</span> <span class="nx">affects</span> <span class="nx">th'</span> <span class="nx">chosen</span> <span class="nx">ay'con</span><span class="p">.</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">&gt;}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="759cbcfcb44ab155fbc92025e3f78f2e">
+<div class="tab-panel" data-tab-group="3aea1cf40fbcded731d09141fd28cdd6">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="just-colored-style"
       class="tab-nav-button tab-panel-style cstyle blue active" tabindex="-1"
-      onclick="switchTab('759cbcfcb44ab155fbc92025e3f78f2e','just-colored-style')"
+      onclick="switchTab('3aea1cf40fbcded731d09141fd28cdd6','just-colored-style')"
     >
       <span class="tab-nav-text">just colored style</span>
     </button>
     <button
       data-tab-item="just-color"
       class="tab-nav-button tab-panel-style cstyle filled" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('759cbcfcb44ab155fbc92025e3f78f2e','just-color')"
+      onclick="switchTab('3aea1cf40fbcded731d09141fd28cdd6','just-color')"
     >
       <span class="tab-nav-text">just color</span>
     </button>
     <button
       data-tab-item="default-style-and-color"
       class="tab-nav-button tab-panel-style cstyle default" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('759cbcfcb44ab155fbc92025e3f78f2e','default-style-and-color')"
+      onclick="switchTab('3aea1cf40fbcded731d09141fd28cdd6','default-style-and-color')"
     >
       <span class="tab-nav-text">default style an' color</span>
     </button>
     <button
       data-tab-item="just-severity-stylefa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info"
-      onclick="switchTab('759cbcfcb44ab155fbc92025e3f78f2e','just-severity-stylefa-fw-fas-fa-info-circle')"
+      onclick="switchTab('3aea1cf40fbcded731d09141fd28cdd6','just-severity-stylefa-fw-fas-fa-info-circle')"
     >
       <span class="tab-nav-text"><i class="fa-fw fas fa-info-circle"></i> just severity style</span>
     </button>
     <button
       data-tab-item="severity-style-and-colorfa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('759cbcfcb44ab155fbc92025e3f78f2e','severity-style-and-colorfa-fw-fas-fa-info-circle')"
+      onclick="switchTab('3aea1cf40fbcded731d09141fd28cdd6','severity-style-and-colorfa-fw-fas-fa-info-circle')"
     >
       <span class="tab-nav-text"><i class="fa-fw fas fa-info-circle"></i> severity style an' color</span>
     </button>
@@ -527,12 +527,12 @@ If ye want multiple tabs grouped together ye can wrap yer tabs into th&#39; tabs
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../../js/search.js?1700525734" defer></script>
+        <script src="../../../js/auto-complete.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697953" defer></script>
+        <script src="../../../js/search.js?1700697953" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -622,9 +622,11 @@ If ye want multiple tabs grouped together ye can wrap yer tabs into th&#39; tabs
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -689,13 +691,13 @@ If ye want multiple tabs grouped together ye can wrap yer tabs into th&#39; tabs
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../../js/github-buttons.js?1700697953"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../../../js/theme.js?1700525734" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697953" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697953" defer></script>
+    <script src="../../../js/theme.js?1700697953" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/tab/index.print.html b/pir/shortcodes/tab/index.print.html
index 641c82c7cb..ac49469377 100644
--- a/pir/shortcodes/tab/index.print.html
+++ b/pir/shortcodes/tab/index.print.html
@@ -30,21 +30,21 @@ If ye want multiple tabs grouped together ye can wrap yer tabs into th&#39; tabs
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tab/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tab/index.html" rel="canonical" type="text/html" title="Tab :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/tab/index.xml" rel="alternate" type="application/rss+xml" title="Tab :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,7 +54,7 @@ If ye want multiple tabs grouped together ye can wrap yer tabs into th&#39; tabs
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -105,13 +105,13 @@ If ye want multiple tabs grouped together ye can wrap yer tabs into th&#39; tabs
 <p>This be especially useful if ye want t' flag yer code example wit' an explicit language.</p>
 <p>If ye want multiple tabs grouped together ye can wrap yer tabs into th' <a href="../../../shortcodes/tabs/index.html"><code>tabs</code> shortcode</a>.</p>
 
-<div class="tab-panel" data-tab-group="db79a05e1d2a03c9bcf0bb49016361f2">
+<div class="tab-panel" data-tab-group="6fc04c8064a10370abdf9eb3a60166dd">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('db79a05e1d2a03c9bcf0bb49016361f2','c')"
+      onclick="switchTab('6fc04c8064a10370abdf9eb3a60166dd','c')"
     >
       <span class="tab-nav-text">c</span>
     </button>
@@ -216,13 +216,13 @@ If ye want multiple tabs grouped together ye can wrap yer tabs into th&#39; tabs
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="3c0f0bee5f99f3d16c75c794502c5484">
+<div class="tab-panel" data-tab-group="24da9486f5802e867bf1a821ff05dd5b">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="code"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('3c0f0bee5f99f3d16c75c794502c5484','code')"
+      onclick="switchTab('24da9486f5802e867bf1a821ff05dd5b','code')"
     >
       <span class="tab-nav-text">Code</span>
     </button>
@@ -244,13 +244,13 @@ If ye want multiple tabs grouped together ye can wrap yer tabs into th&#39; tabs
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="abb39aef556dce2260423c72cff1b992">
+<div class="tab-panel" data-tab-group="4685c4f85344783efeaea4fa574e8232">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="mixed"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('abb39aef556dce2260423c72cff1b992','mixed')"
+      onclick="switchTab('4685c4f85344783efeaea4fa574e8232','mixed')"
     >
       <span class="tab-nav-text"><em><strong>Mixed</strong></em></span>
     </button>
@@ -295,41 +295,41 @@ If ye want multiple tabs grouped together ye can wrap yer tabs into th&#39; tabs
 </span></span><span class="line"><span class="cl"><span class="nx">This</span> <span class="nx">will</span> <span class="nx">set</span> <span class="nx">th'</span> <span class="nx">background</span> <span class="nx">t'</span> <span class="nx">a</span> <span class="nx">lighter</span> <span class="nx">version</span> <span class="nx">o'</span> <span class="nx">th'</span> <span class="nx">chosen</span> <span class="nx">CSS</span> <span class="nx">color</span> <span class="nx">value</span> <span class="nx">an'</span> <span class="nx">also</span> <span class="nx">affects</span> <span class="nx">th'</span> <span class="nx">chosen</span> <span class="nx">ay'con</span><span class="p">.</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">&gt;}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="759cbcfcb44ab155fbc92025e3f78f2e">
+<div class="tab-panel" data-tab-group="3aea1cf40fbcded731d09141fd28cdd6">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="just-colored-style"
       class="tab-nav-button tab-panel-style cstyle blue active" tabindex="-1"
-      onclick="switchTab('759cbcfcb44ab155fbc92025e3f78f2e','just-colored-style')"
+      onclick="switchTab('3aea1cf40fbcded731d09141fd28cdd6','just-colored-style')"
     >
       <span class="tab-nav-text">just colored style</span>
     </button>
     <button
       data-tab-item="just-color"
       class="tab-nav-button tab-panel-style cstyle filled" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('759cbcfcb44ab155fbc92025e3f78f2e','just-color')"
+      onclick="switchTab('3aea1cf40fbcded731d09141fd28cdd6','just-color')"
     >
       <span class="tab-nav-text">just color</span>
     </button>
     <button
       data-tab-item="default-style-and-color"
       class="tab-nav-button tab-panel-style cstyle default" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('759cbcfcb44ab155fbc92025e3f78f2e','default-style-and-color')"
+      onclick="switchTab('3aea1cf40fbcded731d09141fd28cdd6','default-style-and-color')"
     >
       <span class="tab-nav-text">default style an' color</span>
     </button>
     <button
       data-tab-item="just-severity-stylefa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info"
-      onclick="switchTab('759cbcfcb44ab155fbc92025e3f78f2e','just-severity-stylefa-fw-fas-fa-info-circle')"
+      onclick="switchTab('3aea1cf40fbcded731d09141fd28cdd6','just-severity-stylefa-fw-fas-fa-info-circle')"
     >
       <span class="tab-nav-text"><i class="fa-fw fas fa-info-circle"></i> just severity style</span>
     </button>
     <button
       data-tab-item="severity-style-and-colorfa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('759cbcfcb44ab155fbc92025e3f78f2e','severity-style-and-colorfa-fw-fas-fa-info-circle')"
+      onclick="switchTab('3aea1cf40fbcded731d09141fd28cdd6','severity-style-and-colorfa-fw-fas-fa-info-circle')"
     >
       <span class="tab-nav-text"><i class="fa-fw fas fa-info-circle"></i> severity style an' color</span>
     </button>
@@ -391,8 +391,8 @@ If ye want multiple tabs grouped together ye can wrap yer tabs into th&#39; tabs
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/tabs/index.html b/pir/shortcodes/tabs/index.html
index ec0ff23c07..792b563962 100644
--- a/pir/shortcodes/tabs/index.html
+++ b/pir/shortcodes/tabs/index.html
@@ -30,20 +30,20 @@ hello. py sh c print(&#34;Hello World!&#34;) echo &#34;Hello World!&#34; printf(
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tabs/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/tabs/index.xml" rel="alternate" type="application/rss+xml" title="Tabs :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/tabs/index.print.html" rel="alternate" type="text/html" title="Tabs :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -53,7 +53,7 @@ hello. py sh c print(&#34;Hello World!&#34;) echo &#34;Hello World!&#34; printf(
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -159,27 +159,27 @@ hello. py sh c print(&#34;Hello World!&#34;) echo &#34;Hello World!&#34; printf(
 <p>This comes 'n handy eg. fer provid'n code snippets fer multiple languages.</p>
 <p>If ye just want a single tab ye can instead call th' <a href="../../../shortcodes/tab/index.html"><code>tab</code> shortcode</a> standalone.</p>
 
-<div class="tab-panel" data-tab-group="b076e63052eb8762a626938dac700e3d">
+<div class="tab-panel" data-tab-group="5b446ca8c1023a43b49614aaf3ed17d3">
   <div class="tab-nav">
     <div class="tab-nav-title">hello.</div>
     <button
       data-tab-item="py"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('b076e63052eb8762a626938dac700e3d','py')"
+      onclick="switchTab('5b446ca8c1023a43b49614aaf3ed17d3','py')"
     >
       <span class="tab-nav-text">py</span>
     </button>
     <button
       data-tab-item="sh"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('b076e63052eb8762a626938dac700e3d','sh')"
+      onclick="switchTab('5b446ca8c1023a43b49614aaf3ed17d3','sh')"
     >
       <span class="tab-nav-text">sh</span>
     </button>
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('b076e63052eb8762a626938dac700e3d','c')"
+      onclick="switchTab('5b446ca8c1023a43b49614aaf3ed17d3','c')"
     >
       <span class="tab-nav-text">c</span>
     </button>
@@ -327,27 +327,27 @@ hello. py sh c print(&#34;Hello World!&#34;) echo &#34;Hello World!&#34; printf(
 <p>See what happens t' th' tab views while ye select different tabs.</p>
 <p>While press'n a tab o' Group A switches all tab views o' Group A 'n sync (if th' tab be available), th' tabs o' Group B be left untouched.</p>
 
-<div class="tab-panel" data-tab-group="06f0071caaab08061eb93f197af4ef3b">
+<div class="tab-panel" data-tab-group="4f448d50c3aaf13463c335f4d67f7387">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="group-a-tab-view-1"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('06f0071caaab08061eb93f197af4ef3b','group-a-tab-view-1')"
+      onclick="switchTab('4f448d50c3aaf13463c335f4d67f7387','group-a-tab-view-1')"
     >
       <span class="tab-nav-text">Group A, Tab View 1</span>
     </button>
     <button
       data-tab-item="group-a-tab-view-2"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('06f0071caaab08061eb93f197af4ef3b','group-a-tab-view-2')"
+      onclick="switchTab('4f448d50c3aaf13463c335f4d67f7387','group-a-tab-view-2')"
     >
       <span class="tab-nav-text">Group A, Tab View 2</span>
     </button>
     <button
       data-tab-item="group-b"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('06f0071caaab08061eb93f197af4ef3b','group-b')"
+      onclick="switchTab('4f448d50c3aaf13463c335f4d67f7387','group-b')"
     >
       <span class="tab-nav-text">Group B</span>
     </button>
@@ -784,12 +784,12 @@ hello. py sh c print(&#34;Hello World!&#34;) echo &#34;Hello World!&#34; printf(
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525734" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525734" defer></script>
-        <script src="../../../js/search.js?1700525734" defer></script>
+        <script src="../../../js/auto-complete.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697953" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697953" defer></script>
+        <script src="../../../js/search.js?1700697953" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -879,9 +879,11 @@ hello. py sh c print(&#34;Hello World!&#34;) echo &#34;Hello World!&#34; printf(
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -946,13 +948,13 @@ hello. py sh c print(&#34;Hello World!&#34;) echo &#34;Hello World!&#34; printf(
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525734"></script>
+          <script async src="../../../js/github-buttons.js?1700697953"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525734" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525734" defer></script>
-    <script src="../../../js/theme.js?1700525734" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697953" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697953" defer></script>
+    <script src="../../../js/theme.js?1700697953" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/tabs/index.print.html b/pir/shortcodes/tabs/index.print.html
index 6184fbcfa4..a90d980b73 100644
--- a/pir/shortcodes/tabs/index.print.html
+++ b/pir/shortcodes/tabs/index.print.html
@@ -30,21 +30,21 @@ hello. py sh c print(&#34;Hello World!&#34;) echo &#34;Hello World!&#34; printf(
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tabs/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tabs/index.html" rel="canonical" type="text/html" title="Tabs :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/tabs/index.xml" rel="alternate" type="application/rss+xml" title="Tabs :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../../js/url.js?1700525735"></script>
-    <script src="../../../js/variant.js?1700525735"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../../js/url.js?1700697954"></script>
+    <script src="../../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -54,7 +54,7 @@ hello. py sh c print(&#34;Hello World!&#34;) echo &#34;Hello World!&#34; printf(
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -105,27 +105,27 @@ hello. py sh c print(&#34;Hello World!&#34;) echo &#34;Hello World!&#34; printf(
 <p>This comes 'n handy eg. fer provid'n code snippets fer multiple languages.</p>
 <p>If ye just want a single tab ye can instead call th' <a href="../../../shortcodes/tab/index.html"><code>tab</code> shortcode</a> standalone.</p>
 
-<div class="tab-panel" data-tab-group="b076e63052eb8762a626938dac700e3d">
+<div class="tab-panel" data-tab-group="5b446ca8c1023a43b49614aaf3ed17d3">
   <div class="tab-nav">
     <div class="tab-nav-title">hello.</div>
     <button
       data-tab-item="py"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('b076e63052eb8762a626938dac700e3d','py')"
+      onclick="switchTab('5b446ca8c1023a43b49614aaf3ed17d3','py')"
     >
       <span class="tab-nav-text">py</span>
     </button>
     <button
       data-tab-item="sh"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('b076e63052eb8762a626938dac700e3d','sh')"
+      onclick="switchTab('5b446ca8c1023a43b49614aaf3ed17d3','sh')"
     >
       <span class="tab-nav-text">sh</span>
     </button>
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('b076e63052eb8762a626938dac700e3d','c')"
+      onclick="switchTab('5b446ca8c1023a43b49614aaf3ed17d3','c')"
     >
       <span class="tab-nav-text">c</span>
     </button>
@@ -273,27 +273,27 @@ hello. py sh c print(&#34;Hello World!&#34;) echo &#34;Hello World!&#34; printf(
 <p>See what happens t' th' tab views while ye select different tabs.</p>
 <p>While press'n a tab o' Group A switches all tab views o' Group A 'n sync (if th' tab be available), th' tabs o' Group B be left untouched.</p>
 
-<div class="tab-panel" data-tab-group="06f0071caaab08061eb93f197af4ef3b">
+<div class="tab-panel" data-tab-group="4f448d50c3aaf13463c335f4d67f7387">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="group-a-tab-view-1"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('06f0071caaab08061eb93f197af4ef3b','group-a-tab-view-1')"
+      onclick="switchTab('4f448d50c3aaf13463c335f4d67f7387','group-a-tab-view-1')"
     >
       <span class="tab-nav-text">Group A, Tab View 1</span>
     </button>
     <button
       data-tab-item="group-a-tab-view-2"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('06f0071caaab08061eb93f197af4ef3b','group-a-tab-view-2')"
+      onclick="switchTab('4f448d50c3aaf13463c335f4d67f7387','group-a-tab-view-2')"
     >
       <span class="tab-nav-text">Group A, Tab View 2</span>
     </button>
     <button
       data-tab-item="group-b"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('06f0071caaab08061eb93f197af4ef3b','group-b')"
+      onclick="switchTab('4f448d50c3aaf13463c335f4d67f7387','group-b')"
     >
       <span class="tab-nav-text">Group B</span>
     </button>
@@ -649,8 +649,8 @@ hello. py sh c print(&#34;Hello World!&#34;) echo &#34;Hello World!&#34; printf(
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/showcase/index.html b/pir/showcase/index.html
index f14d1e0252..5cc21a07a8 100644
--- a/pir/showcase/index.html
+++ b/pir/showcase/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/showcase/index.html" rel="alternate" hreflang="pir">
     <link href="../../pir/showcase/index.xml" rel="alternate" type="application/rss+xml" title="Showcase :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../pir/showcase/index.print.html" rel="alternate" type="text/html" title="Showcase :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -242,12 +242,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../js/search.js?1700525735" defer></script>
+        <script src="../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -337,9 +337,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -404,13 +406,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../js/theme.js?1700525735" defer></script>
+    <script src="../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/showcase/index.print.html b/pir/showcase/index.print.html
index f363c92bdf..a28f43c789 100644
--- a/pir/showcase/index.print.html
+++ b/pir/showcase/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/showcase/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/showcase/index.html" rel="canonical" type="text/html" title="Showcase :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../pir/showcase/index.xml" rel="alternate" type="application/rss+xml" title="Showcase :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525735" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525735" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525735" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525735" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525735" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525735" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525735" rel="stylesheet">
-    <link href="../../css/print.css?1700525735" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525735" rel="stylesheet">
-    <link href="../../css/ie.css?1700525735" rel="stylesheet">
-    <script src="../../js/url.js?1700525735"></script>
-    <script src="../../js/variant.js?1700525735"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697954" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697954" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697954" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697954" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697954" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697954" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697954" rel="stylesheet">
+    <link href="../../css/print.css?1700697954" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697954" rel="stylesheet">
+    <link href="../../css/ie.css?1700697954" rel="stylesheet">
+    <script src="../../js/url.js?1700697954"></script>
+    <script src="../../js/variant.js?1700697954"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -114,8 +114,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../js/theme.js?1700525735" defer></script>
+    <script src="../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/tags/children/index.html b/pir/tags/children/index.html
index c49947112b..0102f94fcc 100644
--- a/pir/tags/children/index.html
+++ b/pir/tags/children/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/children/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/children/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/tags/children/index.xml" rel="alternate" type="application/rss+xml" title="Children :: Tagga :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -230,12 +230,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../js/search.js?1700525735" defer></script>
+        <script src="../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -325,9 +325,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -392,13 +394,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/tags/config/index.html b/pir/tags/config/index.html
index 532cc88c9a..433363b0fc 100644
--- a/pir/tags/config/index.html
+++ b/pir/tags/config/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/config/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/config/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/tags/config/index.xml" rel="alternate" type="application/rss+xml" title="config :: Tagga :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -217,12 +217,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../js/search.js?1700525735" defer></script>
+        <script src="../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -312,9 +312,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -379,13 +381,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/tags/content/index.html b/pir/tags/content/index.html
index bc507971cb..a42b592e0b 100644
--- a/pir/tags/content/index.html
+++ b/pir/tags/content/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/content/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/content/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/tags/content/index.xml" rel="alternate" type="application/rss+xml" title="Content :: Tagga :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -217,12 +217,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../js/search.js?1700525735" defer></script>
+        <script src="../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -312,9 +312,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -379,13 +381,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/tags/documentatn/index.html b/pir/tags/documentatn/index.html
index 9f4d3687d5..8e7f642315 100644
--- a/pir/tags/documentatn/index.html
+++ b/pir/tags/documentatn/index.html
@@ -19,20 +19,20 @@
     <meta property="og:site_name" content="Cap&#39;n Hugo Relearrrn Theme">
     <title>documentat&#39;n :: Tagga :: Cap&#39;n Hugo Relearrrn Theme</title>
     <link href="../../../pir/tags/documentatn/index.xml" rel="alternate" type="application/rss+xml" title="documentat&#39;n :: Tagga :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -42,7 +42,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -214,12 +214,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../js/search.js?1700525735" defer></script>
+        <script src="../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -308,9 +308,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -375,13 +377,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/tags/headless/index.html b/pir/tags/headless/index.html
index af0e502d9a..4fb42a8edf 100644
--- a/pir/tags/headless/index.html
+++ b/pir/tags/headless/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/headless/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/headless/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/tags/headless/index.xml" rel="alternate" type="application/rss+xml" title="headless :: Tagga :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -208,12 +208,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../js/search.js?1700525735" defer></script>
+        <script src="../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -303,9 +303,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -370,13 +372,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/tags/index.html b/pir/tags/index.html
index 7375e81432..addbd69658 100644
--- a/pir/tags/index.html
+++ b/pir/tags/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/index.html" rel="alternate" hreflang="pir">
     <link href="../../pir/tags/index.xml" rel="alternate" type="application/rss+xml" title="Tag-a-taggs :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -249,12 +249,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../js/search.js?1700525735" defer></script>
+        <script src="../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -344,9 +344,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -411,13 +413,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../js/theme.js?1700525735" defer></script>
+    <script src="../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/tags/its-hidden/index.html b/pir/tags/its-hidden/index.html
index 4c9e818391..eea63f4206 100644
--- a/pir/tags/its-hidden/index.html
+++ b/pir/tags/its-hidden/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/its-hidden/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/its-hidden/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/tags/its-hidden/index.xml" rel="alternate" type="application/rss+xml" title="hush, matey :: Tagga :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -234,12 +234,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../js/search.js?1700525735" defer></script>
+        <script src="../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -329,9 +329,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -396,13 +398,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/tags/non-hidden/index.html b/pir/tags/non-hidden/index.html
index 6d20ceab1f..c77b11c3b2 100644
--- a/pir/tags/non-hidden/index.html
+++ b/pir/tags/non-hidden/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/non-hidden/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/non-hidden/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/tags/non-hidden/index.xml" rel="alternate" type="application/rss+xml" title="non-hidden :: Tagga :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -224,12 +224,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../js/search.js?1700525735" defer></script>
+        <script src="../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -319,9 +319,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -386,13 +388,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/pir/tags/tutorrrial/index.html b/pir/tags/tutorrrial/index.html
index 58e00e3671..3e6ade8607 100644
--- a/pir/tags/tutorrrial/index.html
+++ b/pir/tags/tutorrrial/index.html
@@ -19,20 +19,20 @@
     <meta property="og:site_name" content="Cap&#39;n Hugo Relearrrn Theme">
     <title>tutorrrial :: Tagga :: Cap&#39;n Hugo Relearrrn Theme</title>
     <link href="../../../pir/tags/tutorrrial/index.xml" rel="alternate" type="application/rss+xml" title="tutorrrial :: Tagga :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1700525733" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697952" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -42,7 +42,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy t' clipboard`;
       window.T_Copied_to_clipboard = `Copied t' clipboard!`;
@@ -214,12 +214,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525735" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525735" defer></script>
-        <script src="../../../js/search.js?1700525735" defer></script>
+        <script src="../../../js/auto-complete.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697954" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697954" defer></script>
+        <script src="../../../js/search.js?1700697954" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -308,9 +308,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -375,13 +377,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525735"></script>
+          <script async src="../../../js/github-buttons.js?1700697954"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525735" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525735" defer></script>
-    <script src="../../../js/theme.js?1700525735" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697954" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697954" defer></script>
+    <script src="../../../js/theme.js?1700697954" defer></script>
   </body>
 </html>
diff --git a/search.html b/search.html
index 64c4e050fb..c3f96f51fb 100644
--- a/search.html
+++ b/search.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/search.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/search.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/search.html" rel="canonical" type="text/html" title="Search :: Hugo Relearn Theme">
-    <link href="./images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="./images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="./css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="./css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="./css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="./css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="./css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="./css/theme.css?1700525733" rel="stylesheet">
-    <link href="./css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="./css/variant.css?1700525733" rel="stylesheet">
-    <link href="./css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="./css/ie.css?1700525733" rel="stylesheet">
-    <script src="./js/url.js?1700525733"></script>
-    <script src="./js/variant.js?1700525733"></script>
+    <link href="./css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="./css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="./css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="./css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="./css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="./css/theme.css?1700697952" rel="stylesheet">
+    <link href="./css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="./css/variant.css?1700697952" rel="stylesheet">
+    <link href="./css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="./css/ie.css?1700697952" rel="stylesheet">
+    <script src="./js/url.js?1700697952"></script>
+    <script src="./js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -205,12 +205,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="./js/auto-complete.js?1700525733" defer></script>
-        <script src="./js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="./js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="./js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="./js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="./js/search.js?1700525733" defer></script>
+        <script src="./js/auto-complete.js?1700697952" defer></script>
+        <script src="./js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="./js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="./js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="./js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="./js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -300,9 +300,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -367,13 +369,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="./js/github-buttons.js?1700525733"></script>
+          <script async src="./js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="./js/clipboard.min.js?1700525733" defer></script>
-    <script src="./js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="./js/theme.js?1700525733" defer></script>
+    <script src="./js/clipboard.min.js?1700697952" defer></script>
+    <script src="./js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="./js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/attachments/index.html b/shortcodes/attachments/index.html
index cc8e7c4ddb..ce0072fec5 100644
--- a/shortcodes/attachments/index.html
+++ b/shortcodes/attachments/index.html
@@ -24,20 +24,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/attachments/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/attachments/index.xml" rel="alternate" type="application/rss+xml" title="Attachments :: Hugo Relearn Theme">
     <link href="../../shortcodes/attachments/index.print.html" rel="alternate" type="text/html" title="Attachments :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -486,12 +486,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525732" defer></script>
-        <script src="../../js/search.js?1700525732" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -581,9 +581,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -648,13 +650,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525732"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525732" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525732" defer></script>
-    <script src="../../js/theme.js?1700525732" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/shortcodes/attachments/index.print.html b/shortcodes/attachments/index.print.html
index b9c7621dfa..23200b4228 100644
--- a/shortcodes/attachments/index.print.html
+++ b/shortcodes/attachments/index.print.html
@@ -24,21 +24,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/attachments/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/attachments/index.html" rel="canonical" type="text/html" title="Attachments :: Hugo Relearn Theme">
     <link href="../../shortcodes/attachments/index.xml" rel="alternate" type="application/rss+xml" title="Attachments :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -48,7 +48,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -343,8 +343,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/badge/index.html b/shortcodes/badge/index.html
index 44a2bc334a..2160c6b328 100644
--- a/shortcodes/badge/index.html
+++ b/shortcodes/badge/index.html
@@ -24,20 +24,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/badge/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/badge/index.xml" rel="alternate" type="application/rss+xml" title="Badge :: Hugo Relearn Theme">
     <link href="../../shortcodes/badge/index.print.html" rel="alternate" type="text/html" title="Badge :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -425,12 +425,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525732" defer></script>
-        <script src="../../js/search.js?1700525732" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -520,9 +520,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -587,13 +589,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525732"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525732" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525732" defer></script>
-    <script src="../../js/theme.js?1700525732" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/shortcodes/badge/index.print.html b/shortcodes/badge/index.print.html
index 4a8daf15a2..16244c1a3b 100644
--- a/shortcodes/badge/index.print.html
+++ b/shortcodes/badge/index.print.html
@@ -24,21 +24,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/badge/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/badge/index.html" rel="canonical" type="text/html" title="Badge :: Hugo Relearn Theme">
     <link href="../../shortcodes/badge/index.xml" rel="alternate" type="application/rss+xml" title="Badge :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -48,7 +48,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -289,8 +289,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/button/index.html b/shortcodes/button/index.html
index 945f67c547..f4af660489 100644
--- a/shortcodes/button/index.html
+++ b/shortcodes/button/index.html
@@ -24,20 +24,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/button/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/button/index.xml" rel="alternate" type="application/rss+xml" title="Button :: Hugo Relearn Theme">
     <link href="../../shortcodes/button/index.print.html" rel="alternate" type="text/html" title="Button :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -565,12 +565,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525732" defer></script>
-        <script src="../../js/search.js?1700525732" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -660,9 +660,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -727,13 +729,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525732"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525732" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525732" defer></script>
-    <script src="../../js/theme.js?1700525732" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/shortcodes/button/index.print.html b/shortcodes/button/index.print.html
index a154009edb..52e4d5c316 100644
--- a/shortcodes/button/index.print.html
+++ b/shortcodes/button/index.print.html
@@ -24,21 +24,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/button/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/button/index.html" rel="canonical" type="text/html" title="Button :: Hugo Relearn Theme">
     <link href="../../shortcodes/button/index.xml" rel="alternate" type="application/rss+xml" title="Button :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -48,7 +48,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -428,8 +428,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html
index f4a64b0eda..0f39e9d946 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
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../../../../../../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../../../../../../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../../../../../../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../../../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../../../../../../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../../../../../../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../../../../../../../js/url.js?1700525732"></script>
-    <script src="../../../../../../../../js/variant.js?1700525732"></script>
+    <link href="../../../../../../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../../../../../../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../../../../../../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../../../../../../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../../../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../../../../../../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../../../../../../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../../../../../../../js/url.js?1700697951"></script>
+    <script src="../../../../../../../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -233,12 +233,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../../../../../../../js/search.js?1700525733" defer></script>
+        <script src="../../../../../../../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../../../../../../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -332,9 +332,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -399,13 +401,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../../../../../../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../../../../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../../../../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../../../../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html
index a2d971522d..6d607411b3 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html
@@ -22,21 +22,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../../../../../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../../../../../../js/url.js?1700525733"></script>
-    <script src="../../../../../../../../js/variant.js?1700525733"></script>
+    <link href="../../../../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../../../../../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../../../../../../js/url.js?1700697952"></script>
+    <script src="../../../../../../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -113,8 +113,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../../../../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../../../../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../../../../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html
index 70d6577503..2224c88eb8 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
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../../../../../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../../../../../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1700525732"></script>
-    <script src="../../../../../../../js/variant.js?1700525732"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../../../../../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../../../../../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1700697951"></script>
+    <script src="../../../../../../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -243,12 +243,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../../../../../../js/search.js?1700525733" defer></script>
+        <script src="../../../../../../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../../../../../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -342,9 +342,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -409,13 +411,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../../../../../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../../../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../../../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html
index 55753f9fae..f8d0329028 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html
@@ -22,21 +22,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1700525733"></script>
-    <script src="../../../../../../../js/variant.js?1700525733"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1700697952"></script>
+    <script src="../../../../../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -138,8 +138,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../../../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../../../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html
index 6cdb9c6cc4..f55f8bf584 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
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../../../../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1700525732"></script>
-    <script src="../../../../../../js/variant.js?1700525732"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../../../../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../../../../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1700697951"></script>
+    <script src="../../../../../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -242,12 +242,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../../../../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../../../../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../../../../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../../../../../js/search.js?1700525733" defer></script>
+        <script src="../../../../../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../../../../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../../../../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../../../../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../../../../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -339,9 +339,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -406,13 +408,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../../../../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html
index 33a4e11c18..0d1dfb6edc 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html
@@ -22,21 +22,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../../../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1700525733"></script>
-    <script src="../../../../../../js/variant.js?1700525733"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../../../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1700697952"></script>
+    <script src="../../../../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -120,8 +120,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html b/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html
index 158f91787a..b3e78562f2 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
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../../../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../../../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../../../../js/url.js?1700525732"></script>
-    <script src="../../../../../js/variant.js?1700525732"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../../../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../../../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../../../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../../../../js/url.js?1700697951"></script>
+    <script src="../../../../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -241,12 +241,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../../../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../../../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../../../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../../../../js/search.js?1700525733" defer></script>
+        <script src="../../../../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../../../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../../../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../../../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../../../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -338,9 +338,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -405,13 +407,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../../../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html b/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html
index b88678248f..e78c62019a 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html
@@ -22,21 +22,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../../../js/url.js?1700525733"></script>
-    <script src="../../../../../js/variant.js?1700525733"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../../../js/url.js?1700697952"></script>
+    <script src="../../../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -145,8 +145,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html b/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html
index c2b797b985..d1c1aeb487 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
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1-2-1 :: Hugo Relearn Theme">
     <link href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html" rel="alternate" type="text/html" title="page 1-1-2-1 :: Hugo Relearn Theme">
-    <link href="../../../../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../../../../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1700525732"></script>
-    <script src="../../../../../../js/variant.js?1700525732"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../../../../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../../../../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1700697951"></script>
+    <script src="../../../../../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -232,12 +232,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../../../../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../../../../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../../../../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../../../../../js/search.js?1700525733" defer></script>
+        <script src="../../../../../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../../../../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../../../../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../../../../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../../../../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -327,9 +327,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -394,13 +396,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../../../../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html b/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html
index fa69c0f42a..4b08d89b30 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" rel="canonical" type="text/html" title="page 1-1-2-1 :: Hugo Relearn Theme">
     <link href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1-2-1 :: Hugo Relearn Theme">
-    <link href="../../../../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../../../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1700525733"></script>
-    <script src="../../../../../../js/variant.js?1700525733"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../../../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1700697952"></script>
+    <script src="../../../../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -112,8 +112,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html b/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html
index 8a4d5efdea..086b4afb6b 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
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1-2-2 :: Hugo Relearn Theme">
     <link href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html" rel="alternate" type="text/html" title="page 1-1-2-2 :: Hugo Relearn Theme">
-    <link href="../../../../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../../../../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1700525732"></script>
-    <script src="../../../../../../js/variant.js?1700525732"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../../../../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../../../../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1700697951"></script>
+    <script src="../../../../../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -232,12 +232,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../../../../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../../../../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../../../../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../../../../../js/search.js?1700525733" defer></script>
+        <script src="../../../../../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../../../../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../../../../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../../../../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../../../../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -327,9 +327,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -394,13 +396,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../../../../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html b/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html
index 49e5eb877a..93bcf05362 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" rel="canonical" type="text/html" title="page 1-1-2-2 :: Hugo Relearn Theme">
     <link href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1-2-2 :: Hugo Relearn Theme">
-    <link href="../../../../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../../../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../../../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1700525733"></script>
-    <script src="../../../../../../js/variant.js?1700525733"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../../../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../../../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1700697952"></script>
+    <script src="../../../../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -112,8 +112,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html b/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html
index 535b87f6b6..1f4ae3c3a0 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
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1-3 :: Hugo Relearn Theme">
     <link href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html" rel="alternate" type="text/html" title="page 1-1-3 :: Hugo Relearn Theme">
-    <link href="../../../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../../../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../../../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../../../../js/url.js?1700525732"></script>
-    <script src="../../../../../js/variant.js?1700525732"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../../../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../../../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../../../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../../../../js/url.js?1700697951"></script>
+    <script src="../../../../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -231,12 +231,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../../../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../../../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../../../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../../../../js/search.js?1700525733" defer></script>
+        <script src="../../../../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../../../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../../../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../../../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../../../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -326,9 +326,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -393,13 +395,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../../../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html b/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html
index 45736d2584..34c350ad7c 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" rel="canonical" type="text/html" title="page 1-1-3 :: Hugo Relearn Theme">
     <link href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1-3 :: Hugo Relearn Theme">
-    <link href="../../../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../../../js/url.js?1700525733"></script>
-    <script src="../../../../../js/variant.js?1700525733"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../../../js/url.js?1700697952"></script>
+    <script src="../../../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -111,8 +111,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/index.html b/shortcodes/children/children-1/children-1-1/index.html
index 0c19cece75..453c93ce4b 100644
--- a/shortcodes/children/children-1/children-1-1/index.html
+++ b/shortcodes/children/children-1/children-1-1/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../shortcodes/children/children-1/children-1-1/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1 :: Hugo Relearn Theme">
     <link href="../../../../shortcodes/children/children-1/children-1-1/index.print.html" rel="alternate" type="text/html" title="page 1-1 :: Hugo Relearn Theme">
-    <link href="../../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../../../js/url.js?1700525732"></script>
-    <script src="../../../../js/variant.js?1700525732"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../../../js/url.js?1700697951"></script>
+    <script src="../../../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -243,12 +243,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../../../js/search.js?1700525733" defer></script>
+        <script src="../../../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -338,9 +338,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -405,13 +407,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/index.print.html b/shortcodes/children/children-1/children-1-1/index.print.html
index 97f2b8a55a..7fb600912e 100644
--- a/shortcodes/children/children-1/children-1-1/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/index.html" rel="canonical" type="text/html" title="page 1-1 :: Hugo Relearn Theme">
     <link href="../../../../shortcodes/children/children-1/children-1-1/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1 :: Hugo Relearn Theme">
-    <link href="../../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../../js/url.js?1700525733"></script>
-    <script src="../../../../js/variant.js?1700525733"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../../js/url.js?1700697952"></script>
+    <script src="../../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -192,8 +192,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/index.html b/shortcodes/children/children-1/index.html
index 94997a4fe3..a68a8b602b 100644
--- a/shortcodes/children/children-1/index.html
+++ b/shortcodes/children/children-1/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html" rel="alternate" hreflang="pir">
     <link href="../../../shortcodes/children/children-1/index.xml" rel="alternate" type="application/rss+xml" title="page 1 :: Hugo Relearn Theme">
     <link href="../../../shortcodes/children/children-1/index.print.html" rel="alternate" type="text/html" title="page 1 :: Hugo Relearn Theme">
-    <link href="../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../../js/url.js?1700525732"></script>
-    <script src="../../../js/variant.js?1700525732"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../../js/url.js?1700697951"></script>
+    <script src="../../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -240,12 +240,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../../js/search.js?1700525733" defer></script>
+        <script src="../../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -335,9 +335,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -402,13 +404,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/index.print.html b/shortcodes/children/children-1/index.print.html
index 2da7683c4d..f4ceb3724a 100644
--- a/shortcodes/children/children-1/index.print.html
+++ b/shortcodes/children/children-1/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/index.html" rel="canonical" type="text/html" title="page 1 :: Hugo Relearn Theme">
     <link href="../../../shortcodes/children/children-1/index.xml" rel="alternate" type="application/rss+xml" title="page 1 :: Hugo Relearn Theme">
-    <link href="../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -217,8 +217,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-2/index.html b/shortcodes/children/children-2/index.html
index 77474118a5..5dd8d58b5c 100644
--- a/shortcodes/children/children-2/index.html
+++ b/shortcodes/children/children-2/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html" rel="alternate" hreflang="pir">
     <link href="../../../shortcodes/children/children-2/index.xml" rel="alternate" type="application/rss+xml" title="page 2 :: Hugo Relearn Theme">
     <link href="../../../shortcodes/children/children-2/index.print.html" rel="alternate" type="text/html" title="page 2 :: Hugo Relearn Theme">
-    <link href="../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../../js/url.js?1700525732"></script>
-    <script src="../../../js/variant.js?1700525732"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../../js/url.js?1700697951"></script>
+    <script src="../../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -230,12 +230,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../../js/search.js?1700525733" defer></script>
+        <script src="../../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -325,9 +325,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -392,13 +394,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-2/index.print.html b/shortcodes/children/children-2/index.print.html
index e1c9000f6b..8d7c777f01 100644
--- a/shortcodes/children/children-2/index.print.html
+++ b/shortcodes/children/children-2/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-2/index.html" rel="canonical" type="text/html" title="page 2 :: Hugo Relearn Theme">
     <link href="../../../shortcodes/children/children-2/index.xml" rel="alternate" type="application/rss+xml" title="page 2 :: Hugo Relearn Theme">
-    <link href="../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -110,8 +110,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-3/index.html b/shortcodes/children/children-3/index.html
index 8ed6e12a37..501bd9c03f 100644
--- a/shortcodes/children/children-3/index.html
+++ b/shortcodes/children/children-3/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html" rel="alternate" hreflang="pir">
     <link href="../../../shortcodes/children/children-3/index.xml" rel="alternate" type="application/rss+xml" title="page 3 :: Hugo Relearn Theme">
     <link href="../../../shortcodes/children/children-3/index.print.html" rel="alternate" type="text/html" title="page 3 :: Hugo Relearn Theme">
-    <link href="../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../../js/url.js?1700525732"></script>
-    <script src="../../../js/variant.js?1700525732"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../../js/url.js?1700697951"></script>
+    <script src="../../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -240,12 +240,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../../js/search.js?1700525733" defer></script>
+        <script src="../../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -335,9 +335,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -402,13 +404,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-3/index.print.html b/shortcodes/children/children-3/index.print.html
index 1ee3ad3fb2..9474ea3e3b 100644
--- a/shortcodes/children/children-3/index.print.html
+++ b/shortcodes/children/children-3/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-3/index.html" rel="canonical" type="text/html" title="page 3 :: Hugo Relearn Theme">
     <link href="../../../shortcodes/children/children-3/index.xml" rel="alternate" type="application/rss+xml" title="page 3 :: Hugo Relearn Theme">
-    <link href="../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -135,8 +135,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-3/test3/index.html b/shortcodes/children/children-3/test3/index.html
index 5f127f08de..79c96df9ce 100644
--- a/shortcodes/children/children-3/test3/index.html
+++ b/shortcodes/children/children-3/test3/index.html
@@ -24,20 +24,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../shortcodes/children/children-3/test3/index.xml" rel="alternate" type="application/rss+xml" title="page 3-1 :: Hugo Relearn Theme">
     <link href="../../../../shortcodes/children/children-3/test3/index.print.html" rel="alternate" type="text/html" title="page 3-1 :: Hugo Relearn Theme">
-    <link href="../../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../../../js/url.js?1700525732"></script>
-    <script src="../../../../js/variant.js?1700525732"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../../../js/url.js?1700697951"></script>
+    <script src="../../../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -231,12 +231,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../../../js/search.js?1700525733" defer></script>
+        <script src="../../../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -326,9 +326,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -393,13 +395,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-3/test3/index.print.html b/shortcodes/children/children-3/test3/index.print.html
index b0d5c63780..0053681e9a 100644
--- a/shortcodes/children/children-3/test3/index.print.html
+++ b/shortcodes/children/children-3/test3/index.print.html
@@ -24,21 +24,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-3/test3/index.html" rel="canonical" type="text/html" title="page 3-1 :: Hugo Relearn Theme">
     <link href="../../../../shortcodes/children/children-3/test3/index.xml" rel="alternate" type="application/rss+xml" title="page 3-1 :: Hugo Relearn Theme">
-    <link href="../../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../../js/url.js?1700525733"></script>
-    <script src="../../../../js/variant.js?1700525733"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../../js/url.js?1700697952"></script>
+    <script src="../../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -48,7 +48,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -111,8 +111,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-4/index.html b/shortcodes/children/children-4/index.html
index 9aa42099b2..d06616e8c2 100644
--- a/shortcodes/children/children-4/index.html
+++ b/shortcodes/children/children-4/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-4/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-4/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-4/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../../js/url.js?1700525732"></script>
-    <script src="../../../js/variant.js?1700525732"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../../js/url.js?1700697951"></script>
+    <script src="../../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -228,12 +228,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../../js/search.js?1700525733" defer></script>
+        <script src="../../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -324,9 +324,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -391,13 +393,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-4/index.print.html b/shortcodes/children/children-4/index.print.html
index 49d5fae9f8..761b367ffd 100644
--- a/shortcodes/children/children-4/index.print.html
+++ b/shortcodes/children/children-4/index.print.html
@@ -22,21 +22,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-4/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-4/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-4/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -108,8 +108,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/index.html b/shortcodes/children/index.html
index d570d6e19f..984341dc30 100644
--- a/shortcodes/children/index.html
+++ b/shortcodes/children/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/children/index.xml" rel="alternate" type="application/rss+xml" title="Children :: Hugo Relearn Theme">
     <link href="../../shortcodes/children/index.print.html" rel="alternate" type="text/html" title="Children :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -427,12 +427,12 @@ So its content is used as description.</p>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -522,9 +522,11 @@ So its content is used as description.</p>
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -589,13 +591,13 @@ So its content is used as description.</p>
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/index.print.html b/shortcodes/children/index.print.html
index 7783d43852..d5f515c52b 100644
--- a/shortcodes/children/index.print.html
+++ b/shortcodes/children/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/index.html" rel="canonical" type="text/html" title="Children :: Hugo Relearn Theme">
     <link href="../../shortcodes/children/index.xml" rel="alternate" type="application/rss+xml" title="Children :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -494,8 +494,8 @@ So its content is used as description.</p>
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/test/index.html b/shortcodes/children/test/index.html
index 9fcb1bb442..f75a234dee 100644
--- a/shortcodes/children/test/index.html
+++ b/shortcodes/children/test/index.html
@@ -27,20 +27,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/test/index.html" rel="alternate" hreflang="pir">
     <link href="../../../shortcodes/children/test/index.xml" rel="alternate" type="application/rss+xml" title="page X :: Hugo Relearn Theme">
     <link href="../../../shortcodes/children/test/index.print.html" rel="alternate" type="text/html" title="page X :: Hugo Relearn Theme">
-    <link href="../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../../js/url.js?1700525732"></script>
-    <script src="../../../js/variant.js?1700525732"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../../js/url.js?1700697951"></script>
+    <script src="../../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -50,7 +50,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -232,12 +232,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1700525732" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1700525732" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700525732" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1700525732" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1700525732" defer></script>
-        <script src="../../../js/search.js?1700525732" defer></script>
+        <script src="../../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -327,9 +327,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -394,13 +396,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../../js/github-buttons.js?1700525732"></script>
+          <script async src="../../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1700525732" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525732" defer></script>
-    <script src="../../../js/theme.js?1700525732" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/test/index.print.html b/shortcodes/children/test/index.print.html
index d32a550f93..fdb142b287 100644
--- a/shortcodes/children/test/index.print.html
+++ b/shortcodes/children/test/index.print.html
@@ -27,21 +27,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/test/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/test/index.html" rel="canonical" type="text/html" title="page X :: Hugo Relearn Theme">
     <link href="../../../shortcodes/children/test/index.xml" rel="alternate" type="application/rss+xml" title="page X :: Hugo Relearn Theme">
-    <link href="../../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../../js/url.js?1700525733"></script>
-    <script src="../../../js/variant.js?1700525733"></script>
+    <link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../../js/url.js?1700697952"></script>
+    <script src="../../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -51,7 +51,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -112,8 +112,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../../js/theme.js?1700525733" defer></script>
+    <script src="../../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/expand/index.html b/shortcodes/expand/index.html
index c3e21aa427..e9aa9b8a7c 100644
--- a/shortcodes/expand/index.html
+++ b/shortcodes/expand/index.html
@@ -24,20 +24,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/expand/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/expand/index.xml" rel="alternate" type="application/rss+xml" title="Expand :: Hugo Relearn Theme">
     <link href="../../shortcodes/expand/index.print.html" rel="alternate" type="text/html" title="Expand :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -152,13 +152,13 @@
 <p>The <code>expand</code> shortcode displays an expandable/collapsible section of text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="R-expand-98e1a92501a385e21b00f329dacf9048" aria-controls="R-expandcontent-98e1a92501a385e21b00f329dacf9048" >
-    <label class="expand-label" for="R-expand-98e1a92501a385e21b00f329dacf9048" >
+    <input type="checkbox" id="R-expand-9ef125b83a5223c1cd35ccdb0e70cd7e" aria-controls="R-expandcontent-9ef125b83a5223c1cd35ccdb0e70cd7e" >
+    <label class="expand-label" for="R-expand-9ef125b83a5223c1cd35ccdb0e70cd7e" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="R-expandcontent-98e1a92501a385e21b00f329dacf9048" class="expand-content">
+    <div id="R-expandcontent-9ef125b83a5223c1cd35ccdb0e70cd7e" class="expand-content">
 
 <p>Thank you!</p>
 <p>That&rsquo;s some text with a footnote<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
@@ -276,26 +276,26 @@
 <h3 id="all-defaults">All Defaults</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">you</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="R-expand-1dd5667c5c07cb4c79d630d853687200" aria-controls="R-expandcontent-1dd5667c5c07cb4c79d630d853687200" >
-    <label class="expand-label" for="R-expand-1dd5667c5c07cb4c79d630d853687200" >
+    <input type="checkbox" id="R-expand-2f8c1347663418e87d33449a8eaa7e91" aria-controls="R-expandcontent-2f8c1347663418e87d33449a8eaa7e91" >
+    <label class="expand-label" for="R-expand-2f8c1347663418e87d33449a8eaa7e91" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="R-expandcontent-1dd5667c5c07cb4c79d630d853687200" class="expand-content">
+    <div id="R-expandcontent-2f8c1347663418e87d33449a8eaa7e91" class="expand-content">
 <p>
 Yes, you did it!</div>
 </div>
 <h3 id="initially-expanded">Initially Expanded</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">to</span> <span class="nx">press</span> <span class="nx">you</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="R-expand-aee3fb94672f3c790146432db6077947" aria-controls="R-expandcontent-aee3fb94672f3c790146432db6077947"  checked>
-    <label class="expand-label" for="R-expand-aee3fb94672f3c790146432db6077947" >
+    <input type="checkbox" id="R-expand-7eb8169ff893ac7a0ee7ee56516f38d2" aria-controls="R-expandcontent-7eb8169ff893ac7a0ee7ee56516f38d2"  checked>
+    <label class="expand-label" for="R-expand-7eb8169ff893ac7a0ee7ee56516f38d2" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="R-expandcontent-aee3fb94672f3c790146432db6077947" class="expand-content">
+    <div id="R-expandcontent-7eb8169ff893ac7a0ee7ee56516f38d2" class="expand-content">
 <p>
 No need to press you!</div>
 </div>
@@ -316,13 +316,13 @@ No need to press you!</div>
 </span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">the</span> <span class="nx">possibilities</span> <span class="nx">are</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">including</span> <span class="nx">other</span> <span class="nx">shortcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="R-expand-f6751999cdcd9ebff43c4039a6730bfd" aria-controls="R-expandcontent-f6751999cdcd9ebff43c4039a6730bfd" >
-    <label class="expand-label" for="R-expand-f6751999cdcd9ebff43c4039a6730bfd" >
+    <input type="checkbox" id="R-expand-1de7a64e907b0b6115bf80c8798d8b70" aria-controls="R-expandcontent-1de7a64e907b0b6115bf80c8798d8b70" >
+    <label class="expand-label" for="R-expand-1de7a64e907b0b6115bf80c8798d8b70" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show me almost <strong>endless</strong> possibilities
     </label>
-    <div id="R-expandcontent-f6751999cdcd9ebff43c4039a6730bfd" class="expand-content">
+    <div id="R-expandcontent-1de7a64e907b0b6115bf80c8798d8b70" class="expand-content">
 
 <p>You can add standard markdown syntax:</p>
 <ul>
@@ -426,12 +426,12 @@ No need to press you!</div>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525732" defer></script>
-        <script src="../../js/search.js?1700525732" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -521,9 +521,11 @@ No need to press you!</div>
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -588,13 +590,13 @@ No need to press you!</div>
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525732"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525732" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525732" defer></script>
-    <script src="../../js/theme.js?1700525732" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/shortcodes/expand/index.print.html b/shortcodes/expand/index.print.html
index db6d7ef655..28fa1a1522 100644
--- a/shortcodes/expand/index.print.html
+++ b/shortcodes/expand/index.print.html
@@ -24,21 +24,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/expand/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/expand/index.html" rel="canonical" type="text/html" title="Expand :: Hugo Relearn Theme">
     <link href="../../shortcodes/expand/index.xml" rel="alternate" type="application/rss+xml" title="Expand :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -48,7 +48,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -97,13 +97,13 @@
 <p>The <code>expand</code> shortcode displays an expandable/collapsible section of text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="R-expand-98e1a92501a385e21b00f329dacf9048" aria-controls="R-expandcontent-98e1a92501a385e21b00f329dacf9048" >
-    <label class="expand-label" for="R-expand-98e1a92501a385e21b00f329dacf9048" >
+    <input type="checkbox" id="R-expand-9ef125b83a5223c1cd35ccdb0e70cd7e" aria-controls="R-expandcontent-9ef125b83a5223c1cd35ccdb0e70cd7e" >
+    <label class="expand-label" for="R-expand-9ef125b83a5223c1cd35ccdb0e70cd7e" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="R-expandcontent-98e1a92501a385e21b00f329dacf9048" class="expand-content">
+    <div id="R-expandcontent-9ef125b83a5223c1cd35ccdb0e70cd7e" class="expand-content">
 
 <p>Thank you!</p>
 <p>That&rsquo;s some text with a footnote<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
@@ -221,26 +221,26 @@
 <h3 id="all-defaults">All Defaults</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">you</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="R-expand-1dd5667c5c07cb4c79d630d853687200" aria-controls="R-expandcontent-1dd5667c5c07cb4c79d630d853687200" >
-    <label class="expand-label" for="R-expand-1dd5667c5c07cb4c79d630d853687200" >
+    <input type="checkbox" id="R-expand-2f8c1347663418e87d33449a8eaa7e91" aria-controls="R-expandcontent-2f8c1347663418e87d33449a8eaa7e91" >
+    <label class="expand-label" for="R-expand-2f8c1347663418e87d33449a8eaa7e91" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="R-expandcontent-1dd5667c5c07cb4c79d630d853687200" class="expand-content">
+    <div id="R-expandcontent-2f8c1347663418e87d33449a8eaa7e91" class="expand-content">
 <p>
 Yes, you did it!</div>
 </div>
 <h3 id="initially-expanded">Initially Expanded</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">to</span> <span class="nx">press</span> <span class="nx">you</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="R-expand-aee3fb94672f3c790146432db6077947" aria-controls="R-expandcontent-aee3fb94672f3c790146432db6077947"  checked>
-    <label class="expand-label" for="R-expand-aee3fb94672f3c790146432db6077947" >
+    <input type="checkbox" id="R-expand-7eb8169ff893ac7a0ee7ee56516f38d2" aria-controls="R-expandcontent-7eb8169ff893ac7a0ee7ee56516f38d2"  checked>
+    <label class="expand-label" for="R-expand-7eb8169ff893ac7a0ee7ee56516f38d2" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="R-expandcontent-aee3fb94672f3c790146432db6077947" class="expand-content">
+    <div id="R-expandcontent-7eb8169ff893ac7a0ee7ee56516f38d2" class="expand-content">
 <p>
 No need to press you!</div>
 </div>
@@ -261,13 +261,13 @@ No need to press you!</div>
 </span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">the</span> <span class="nx">possibilities</span> <span class="nx">are</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">including</span> <span class="nx">other</span> <span class="nx">shortcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="R-expand-f6751999cdcd9ebff43c4039a6730bfd" aria-controls="R-expandcontent-f6751999cdcd9ebff43c4039a6730bfd" >
-    <label class="expand-label" for="R-expand-f6751999cdcd9ebff43c4039a6730bfd" >
+    <input type="checkbox" id="R-expand-1de7a64e907b0b6115bf80c8798d8b70" aria-controls="R-expandcontent-1de7a64e907b0b6115bf80c8798d8b70" >
+    <label class="expand-label" for="R-expand-1de7a64e907b0b6115bf80c8798d8b70" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show me almost <strong>endless</strong> possibilities
     </label>
-    <div id="R-expandcontent-f6751999cdcd9ebff43c4039a6730bfd" class="expand-content">
+    <div id="R-expandcontent-1de7a64e907b0b6115bf80c8798d8b70" class="expand-content">
 
 <p>You can add standard markdown syntax:</p>
 <ul>
@@ -290,8 +290,8 @@ No need to press you!</div>
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/highlight/index.html b/shortcodes/highlight/index.html
index 3d888de5a1..2a4a7ef703 100644
--- a/shortcodes/highlight/index.html
+++ b/shortcodes/highlight/index.html
@@ -24,20 +24,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/highlight/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/highlight/index.xml" rel="alternate" type="application/rss+xml" title="Highlight :: Hugo Relearn Theme">
     <link href="../../shortcodes/highlight/index.print.html" rel="alternate" type="text/html" title="Highlight :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -159,13 +159,13 @@
 <p>The <code>highlight</code> shortcode renders your code with a syntax highlighter.</p>
 
   
-<div class="tab-panel" data-tab-group="c0ab607cc2ab82ff4520b769373e6451">
+<div class="tab-panel" data-tab-group="9a35da6e73f15b9117338e1d7dee3fac">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('c0ab607cc2ab82ff4520b769373e6451','python')"
+      onclick="switchTab('9a35da6e73f15b9117338e1d7dee3fac','python')"
     >
       <span class="tab-nav-text">python</span>
     </button>
@@ -377,13 +377,13 @@
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>print(&#34;Hello World!&#34;)
 </span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
   
-<div class="tab-panel" data-tab-group="a7b02fab103386745d4b9c3ee69e67fd">
+<div class="tab-panel" data-tab-group="3611aa05c821720cd4be7b8e4a23d002">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('a7b02fab103386745d4b9c3ee69e67fd','python')"
+      onclick="switchTab('3611aa05c821720cd4be7b8e4a23d002','python')"
     >
       <span class="tab-nav-text">python</span>
     </button>
@@ -503,12 +503,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525732" defer></script>
-        <script src="../../js/search.js?1700525732" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -598,9 +598,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -665,13 +667,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525732"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525732" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525732" defer></script>
-    <script src="../../js/theme.js?1700525732" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/shortcodes/highlight/index.print.html b/shortcodes/highlight/index.print.html
index b87663d2e7..5034074517 100644
--- a/shortcodes/highlight/index.print.html
+++ b/shortcodes/highlight/index.print.html
@@ -24,21 +24,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/highlight/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/highlight/index.html" rel="canonical" type="text/html" title="Highlight :: Hugo Relearn Theme">
     <link href="../../shortcodes/highlight/index.xml" rel="alternate" type="application/rss+xml" title="Highlight :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -48,7 +48,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -97,13 +97,13 @@
 <p>The <code>highlight</code> shortcode renders your code with a syntax highlighter.</p>
 
   
-<div class="tab-panel" data-tab-group="c0ab607cc2ab82ff4520b769373e6451">
+<div class="tab-panel" data-tab-group="9a35da6e73f15b9117338e1d7dee3fac">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('c0ab607cc2ab82ff4520b769373e6451','python')"
+      onclick="switchTab('9a35da6e73f15b9117338e1d7dee3fac','python')"
     >
       <span class="tab-nav-text">python</span>
     </button>
@@ -315,13 +315,13 @@
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>print(&#34;Hello World!&#34;)
 </span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
   
-<div class="tab-panel" data-tab-group="a7b02fab103386745d4b9c3ee69e67fd">
+<div class="tab-panel" data-tab-group="3611aa05c821720cd4be7b8e4a23d002">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('a7b02fab103386745d4b9c3ee69e67fd','python')"
+      onclick="switchTab('3611aa05c821720cd4be7b8e4a23d002','python')"
     >
       <span class="tab-nav-text">python</span>
     </button>
@@ -360,8 +360,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/icon/index.html b/shortcodes/icon/index.html
index 256e3f84c0..23cab5e7e2 100644
--- a/shortcodes/icon/index.html
+++ b/shortcodes/icon/index.html
@@ -24,20 +24,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/icon/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/icon/index.xml" rel="alternate" type="application/rss+xml" title="Icon :: Hugo Relearn Theme">
     <link href="../../shortcodes/icon/index.print.html" rel="alternate" type="text/html" title="Icon :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -349,12 +349,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525732" defer></script>
-        <script src="../../js/search.js?1700525732" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -444,9 +444,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -511,13 +513,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525732"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525732" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525732" defer></script>
-    <script src="../../js/theme.js?1700525732" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/shortcodes/icon/index.print.html b/shortcodes/icon/index.print.html
index add6177927..3128b860e7 100644
--- a/shortcodes/icon/index.print.html
+++ b/shortcodes/icon/index.print.html
@@ -24,21 +24,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/icon/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/icon/index.html" rel="canonical" type="text/html" title="Icon :: Hugo Relearn Theme">
     <link href="../../shortcodes/icon/index.xml" rel="alternate" type="application/rss+xml" title="Icon :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -48,7 +48,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -212,8 +212,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/include/index.html b/shortcodes/include/index.html
index 54a189e2fe..ab77eff2e6 100644
--- a/shortcodes/include/index.html
+++ b/shortcodes/include/index.html
@@ -24,20 +24,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/include/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/include/index.xml" rel="alternate" type="application/rss+xml" title="Include :: Hugo Relearn Theme">
     <link href="../../shortcodes/include/index.print.html" rel="alternate" type="text/html" title="Include :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -339,12 +339,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525732" defer></script>
-        <script src="../../js/search.js?1700525732" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -434,9 +434,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -501,13 +503,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525732"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525732" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525732" defer></script>
-    <script src="../../js/theme.js?1700525732" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/shortcodes/include/index.print.html b/shortcodes/include/index.print.html
index 725305f991..887dbf5cbd 100644
--- a/shortcodes/include/index.print.html
+++ b/shortcodes/include/index.print.html
@@ -24,21 +24,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/include/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/include/index.html" rel="canonical" type="text/html" title="Include :: Hugo Relearn Theme">
     <link href="../../shortcodes/include/index.xml" rel="alternate" type="application/rss+xml" title="Include :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -48,7 +48,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -205,8 +205,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/include_me/index.html b/shortcodes/include_me/index.html
index d48bb1ab95..57f496801a 100644
--- a/shortcodes/include_me/index.html
+++ b/shortcodes/include_me/index.html
@@ -24,20 +24,20 @@ Et Cetera (English: /ɛtˈsɛtərə/), abbreviated to etc., etc, et cet., is a L
     <meta property="article:section" content="Shortcodes :: Hugo Relearn Theme">
     <meta property="og:site_name" content="Hugo Relearn Theme">
     <title></title>
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@ Et Cetera (English: /ɛtˈsɛtərə/), abbreviated to etc., etc, et cet., is a L
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -240,12 +240,12 @@ Et Cetera (English: /ɛtˈsɛtərə/), abbreviated to etc., etc, et cet., is a L
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525732" defer></script>
-        <script src="../../js/search.js?1700525732" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -335,9 +335,11 @@ Et Cetera (English: /ɛtˈsɛtərə/), abbreviated to etc., etc, et cet., is a L
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -402,13 +404,13 @@ Et Cetera (English: /ɛtˈsɛtərə/), abbreviated to etc., etc, et cet., is a L
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525732"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525732" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525732" defer></script>
-    <script src="../../js/theme.js?1700525732" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/shortcodes/include_me/index.print.html b/shortcodes/include_me/index.print.html
index a6caca7a60..5bafd9048b 100644
--- a/shortcodes/include_me/index.print.html
+++ b/shortcodes/include_me/index.print.html
@@ -24,21 +24,21 @@ Et Cetera (English: /ɛtˈsɛtərə/), abbreviated to etc., etc, et cet., is a L
     <meta property="article:section" content="Shortcodes :: Hugo Relearn Theme">
     <meta property="og:site_name" content="Hugo Relearn Theme">
     <title></title>
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -48,7 +48,7 @@ Et Cetera (English: /ɛtˈsɛtərə/), abbreviated to etc., etc, et cet., is a L
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -91,8 +91,8 @@ Et Cetera (English: /ɛtˈsɛtərə/), abbreviated to etc., etc, et cet., is a L
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/index.html b/shortcodes/index.html
index 94ef8540b8..863952c980 100644
--- a/shortcodes/index.html
+++ b/shortcodes/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/index.html" rel="alternate" hreflang="pir">
     <link href="../shortcodes/index.xml" rel="alternate" type="application/rss+xml" title="Shortcodes :: Hugo Relearn Theme">
     <link href="../shortcodes/index.print.html" rel="alternate" type="text/html" title="Shortcodes :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../js/url.js?1700525732"></script>
-    <script src="../js/variant.js?1700525732"></script>
+    <link href="../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../js/url.js?1700697951"></script>
+    <script src="../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -244,12 +244,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../js/search.js?1700525733" defer></script>
+        <script src="../js/auto-complete.js?1700697951" defer></script>
+        <script src="../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -339,9 +339,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -406,13 +408,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../js/github-buttons.js?1700525733"></script>
+          <script async src="../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../js/theme.js?1700525733" defer></script>
+    <script src="../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/index.print.html b/shortcodes/index.print.html
index f345f5acde..d9888ca20d 100644
--- a/shortcodes/index.print.html
+++ b/shortcodes/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/index.html" rel="canonical" type="text/html" title="Shortcodes :: Hugo Relearn Theme">
     <link href="../shortcodes/index.xml" rel="alternate" type="application/rss+xml" title="Shortcodes :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../js/url.js?1700525733"></script>
-    <script src="../js/variant.js?1700525733"></script>
+    <link href="../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../js/url.js?1700697952"></script>
+    <script src="../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -1318,13 +1318,13 @@ So its content is used as description.</p>
 <p>The <code>expand</code> shortcode displays an expandable/collapsible section of text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="R-expand-98e1a92501a385e21b00f329dacf9048" aria-controls="R-expandcontent-98e1a92501a385e21b00f329dacf9048" >
-    <label class="expand-label" for="R-expand-98e1a92501a385e21b00f329dacf9048" >
+    <input type="checkbox" id="R-expand-9ef125b83a5223c1cd35ccdb0e70cd7e" aria-controls="R-expandcontent-9ef125b83a5223c1cd35ccdb0e70cd7e" >
+    <label class="expand-label" for="R-expand-9ef125b83a5223c1cd35ccdb0e70cd7e" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="R-expandcontent-98e1a92501a385e21b00f329dacf9048" class="expand-content">
+    <div id="R-expandcontent-9ef125b83a5223c1cd35ccdb0e70cd7e" class="expand-content">
 
 <p>Thank you!</p>
 <p>That&rsquo;s some text with a footnote<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
@@ -1442,26 +1442,26 @@ So its content is used as description.</p>
 <h3 id="all-defaults">All Defaults</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">you</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="R-expand-1dd5667c5c07cb4c79d630d853687200" aria-controls="R-expandcontent-1dd5667c5c07cb4c79d630d853687200" >
-    <label class="expand-label" for="R-expand-1dd5667c5c07cb4c79d630d853687200" >
+    <input type="checkbox" id="R-expand-2f8c1347663418e87d33449a8eaa7e91" aria-controls="R-expandcontent-2f8c1347663418e87d33449a8eaa7e91" >
+    <label class="expand-label" for="R-expand-2f8c1347663418e87d33449a8eaa7e91" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="R-expandcontent-1dd5667c5c07cb4c79d630d853687200" class="expand-content">
+    <div id="R-expandcontent-2f8c1347663418e87d33449a8eaa7e91" class="expand-content">
 <p>
 Yes, you did it!</div>
 </div>
 <h3 id="initially-expanded">Initially Expanded</h3>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">to</span> <span class="nx">press</span> <span class="nx">you</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="R-expand-aee3fb94672f3c790146432db6077947" aria-controls="R-expandcontent-aee3fb94672f3c790146432db6077947"  checked>
-    <label class="expand-label" for="R-expand-aee3fb94672f3c790146432db6077947" >
+    <input type="checkbox" id="R-expand-7eb8169ff893ac7a0ee7ee56516f38d2" aria-controls="R-expandcontent-7eb8169ff893ac7a0ee7ee56516f38d2"  checked>
+    <label class="expand-label" for="R-expand-7eb8169ff893ac7a0ee7ee56516f38d2" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Expand me&hellip;
     </label>
-    <div id="R-expandcontent-aee3fb94672f3c790146432db6077947" class="expand-content">
+    <div id="R-expandcontent-7eb8169ff893ac7a0ee7ee56516f38d2" class="expand-content">
 <p>
 No need to press you!</div>
 </div>
@@ -1482,13 +1482,13 @@ No need to press you!</div>
 </span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">the</span> <span class="nx">possibilities</span> <span class="nx">are</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">including</span> <span class="nx">other</span> <span class="nx">shortcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="R-expand-f6751999cdcd9ebff43c4039a6730bfd" aria-controls="R-expandcontent-f6751999cdcd9ebff43c4039a6730bfd" >
-    <label class="expand-label" for="R-expand-f6751999cdcd9ebff43c4039a6730bfd" >
+    <input type="checkbox" id="R-expand-1de7a64e907b0b6115bf80c8798d8b70" aria-controls="R-expandcontent-1de7a64e907b0b6115bf80c8798d8b70" >
+    <label class="expand-label" for="R-expand-1de7a64e907b0b6115bf80c8798d8b70" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-right"></i>
         Show me almost <strong>endless</strong> possibilities
     </label>
-    <div id="R-expandcontent-f6751999cdcd9ebff43c4039a6730bfd" class="expand-content">
+    <div id="R-expandcontent-1de7a64e907b0b6115bf80c8798d8b70" class="expand-content">
 
 <p>You can add standard markdown syntax:</p>
 <ul>
@@ -1516,13 +1516,13 @@ No need to press you!</div>
 <p>The <code>highlight</code> shortcode renders your code with a syntax highlighter.</p>
 
   
-<div class="tab-panel" data-tab-group="c0ab607cc2ab82ff4520b769373e6451">
+<div class="tab-panel" data-tab-group="9a35da6e73f15b9117338e1d7dee3fac">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('c0ab607cc2ab82ff4520b769373e6451','python')"
+      onclick="switchTab('9a35da6e73f15b9117338e1d7dee3fac','python')"
     >
       <span class="tab-nav-text">python</span>
     </button>
@@ -1734,13 +1734,13 @@ No need to press you!</div>
 </span></span></span><span class="line"><span class="cl"><span class="gh"></span>print(&#34;Hello World!&#34;)
 </span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
   
-<div class="tab-panel" data-tab-group="a7b02fab103386745d4b9c3ee69e67fd">
+<div class="tab-panel" data-tab-group="3611aa05c821720cd4be7b8e4a23d002">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="python"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('a7b02fab103386745d4b9c3ee69e67fd','python')"
+      onclick="switchTab('3611aa05c821720cd4be7b8e4a23d002','python')"
     >
       <span class="tab-nav-text">python</span>
     </button>
@@ -3236,7 +3236,7 @@ xychart-beta
 <div class="sc-openapi-wrapper is-loading helper-loading-container">
   <div
     class="sc-openapi-container"
-    id="R-openapi-31c57f1f6f0cd6725a0f68d0e49958f1"
+    id="R-openapi-401e1460b9fe01fb80df2bab2dfc253d"
     data-openapi-url="../shortcodes/openapi/petstore.json"
   ></div>
 </div>
@@ -3332,13 +3332,13 @@ xychart-beta
 <p>To use formatted parameter, add this in your <code>config.toml</code>:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">markup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">renderer</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">    <span class="nx">unsafe</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="1b46857fb21a796972cdcf06ab971698">
+<div class="tab-panel" data-tab-group="d07e8b5057603b927da29a8c849628f4">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('1b46857fb21a796972cdcf06ab971698','configtoml')"
+      onclick="switchTab('d07e8b5057603b927da29a8c849628f4','configtoml')"
     >
       <span class="tab-nav-text">config.toml</span>
     </button>
@@ -3370,13 +3370,13 @@ xychart-beta
 <p>This is especially useful if you want to flag your code example with an explicit language.</p>
 <p>If you want multiple tabs grouped together you can wrap your tabs into the <a href="../shortcodes/tabs/index.html"><code>tabs</code> shortcode</a>.</p>
 
-<div class="tab-panel" data-tab-group="9242f3a386fa1942130fb99f6ac4fd35">
+<div class="tab-panel" data-tab-group="da2b821db51f322c8c373d0b94f996b8">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('9242f3a386fa1942130fb99f6ac4fd35','c')"
+      onclick="switchTab('da2b821db51f322c8c373d0b94f996b8','c')"
     >
       <span class="tab-nav-text">c</span>
     </button>
@@ -3481,13 +3481,13 @@ xychart-beta
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="bd8f9545f37328749dc3ae32efbd1d6e">
+<div class="tab-panel" data-tab-group="8737e20f575e6139a356b02c483a0778">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="code"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('bd8f9545f37328749dc3ae32efbd1d6e','code')"
+      onclick="switchTab('8737e20f575e6139a356b02c483a0778','code')"
     >
       <span class="tab-nav-text">Code</span>
     </button>
@@ -3509,13 +3509,13 @@ xychart-beta
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="d346ec498d2a6be1e4b78c4a1e68f82c">
+<div class="tab-panel" data-tab-group="24b6caf1eb9f4644a3790f55f20a1206">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="mixed"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('d346ec498d2a6be1e4b78c4a1e68f82c','mixed')"
+      onclick="switchTab('24b6caf1eb9f4644a3790f55f20a1206','mixed')"
     >
       <span class="tab-nav-text"><em><strong>Mixed</strong></em></span>
     </button>
@@ -3560,41 +3560,41 @@ xychart-beta
 </span></span><span class="line"><span class="cl"><span class="nx">This</span> <span class="nx">will</span> <span class="nx">set</span> <span class="nx">the</span> <span class="nx">background</span> <span class="nx">to</span> <span class="nx">a</span> <span class="nx">lighter</span> <span class="nx">version</span> <span class="nx">of</span> <span class="nx">the</span> <span class="nx">chosen</span> <span class="nx">CSS</span> <span class="nx">color</span> <span class="nx">value</span> <span class="nx">and</span> <span class="nx">also</span> <span class="nx">affects</span> <span class="nx">the</span> <span class="nx">chosen</span> <span class="nx">icon</span><span class="p">.</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">&gt;}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="65834ff20f7fc3818570073314217e93">
+<div class="tab-panel" data-tab-group="a1d9b98042d25e3c30eabc54517a4c84">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="just-colored-style"
       class="tab-nav-button tab-panel-style cstyle blue active" tabindex="-1"
-      onclick="switchTab('65834ff20f7fc3818570073314217e93','just-colored-style')"
+      onclick="switchTab('a1d9b98042d25e3c30eabc54517a4c84','just-colored-style')"
     >
       <span class="tab-nav-text">just colored style</span>
     </button>
     <button
       data-tab-item="just-color"
       class="tab-nav-button tab-panel-style cstyle filled" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('65834ff20f7fc3818570073314217e93','just-color')"
+      onclick="switchTab('a1d9b98042d25e3c30eabc54517a4c84','just-color')"
     >
       <span class="tab-nav-text">just color</span>
     </button>
     <button
       data-tab-item="default-style-and-color"
       class="tab-nav-button tab-panel-style cstyle default" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('65834ff20f7fc3818570073314217e93','default-style-and-color')"
+      onclick="switchTab('a1d9b98042d25e3c30eabc54517a4c84','default-style-and-color')"
     >
       <span class="tab-nav-text">default style and color</span>
     </button>
     <button
       data-tab-item="just-severity-stylefa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info"
-      onclick="switchTab('65834ff20f7fc3818570073314217e93','just-severity-stylefa-fw-fas-fa-info-circle')"
+      onclick="switchTab('a1d9b98042d25e3c30eabc54517a4c84','just-severity-stylefa-fw-fas-fa-info-circle')"
     >
       <span class="tab-nav-text"><i class="fa-fw fas fa-info-circle"></i> just severity style</span>
     </button>
     <button
       data-tab-item="severity-style-and-colorfa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('65834ff20f7fc3818570073314217e93','severity-style-and-colorfa-fw-fas-fa-info-circle')"
+      onclick="switchTab('a1d9b98042d25e3c30eabc54517a4c84','severity-style-and-colorfa-fw-fas-fa-info-circle')"
     >
       <span class="tab-nav-text"><i class="fa-fw fas fa-info-circle"></i> severity style and color</span>
     </button>
@@ -3661,27 +3661,27 @@ xychart-beta
 <p>This comes in handy eg. for providing code snippets for multiple languages.</p>
 <p>If you just want a single tab you can instead call the <a href="../shortcodes/tab/index.html"><code>tab</code> shortcode</a> standalone.</p>
 
-<div class="tab-panel" data-tab-group="96759f36939a6bd9dc13a9e6fadde7a5">
+<div class="tab-panel" data-tab-group="4bd0d7ecdad40954b0cba4a271750be9">
   <div class="tab-nav">
     <div class="tab-nav-title">hello.</div>
     <button
       data-tab-item="py"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('96759f36939a6bd9dc13a9e6fadde7a5','py')"
+      onclick="switchTab('4bd0d7ecdad40954b0cba4a271750be9','py')"
     >
       <span class="tab-nav-text">py</span>
     </button>
     <button
       data-tab-item="sh"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('96759f36939a6bd9dc13a9e6fadde7a5','sh')"
+      onclick="switchTab('4bd0d7ecdad40954b0cba4a271750be9','sh')"
     >
       <span class="tab-nav-text">sh</span>
     </button>
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('96759f36939a6bd9dc13a9e6fadde7a5','c')"
+      onclick="switchTab('4bd0d7ecdad40954b0cba4a271750be9','c')"
     >
       <span class="tab-nav-text">c</span>
     </button>
@@ -3829,27 +3829,27 @@ xychart-beta
 <p>See what happens to the tab views while you select different tabs.</p>
 <p>While pressing a tab of Group A switches all tab views of Group A in sync (if the tab is available), the tabs of Group B are left untouched.</p>
 
-<div class="tab-panel" data-tab-group="8baba5e2ecbbbc3446c43b7cdc129fae">
+<div class="tab-panel" data-tab-group="a8b623121a5c785743ee415ea597c745">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="group-a-tab-view-1"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('8baba5e2ecbbbc3446c43b7cdc129fae','group-a-tab-view-1')"
+      onclick="switchTab('a8b623121a5c785743ee415ea597c745','group-a-tab-view-1')"
     >
       <span class="tab-nav-text">Group A, Tab View 1</span>
     </button>
     <button
       data-tab-item="group-a-tab-view-2"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('8baba5e2ecbbbc3446c43b7cdc129fae','group-a-tab-view-2')"
+      onclick="switchTab('a8b623121a5c785743ee415ea597c745','group-a-tab-view-2')"
     >
       <span class="tab-nav-text">Group A, Tab View 2</span>
     </button>
     <button
       data-tab-item="group-b"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('8baba5e2ecbbbc3446c43b7cdc129fae','group-b')"
+      onclick="switchTab('a8b623121a5c785743ee415ea597c745','group-b')"
     >
       <span class="tab-nav-text">Group B</span>
     </button>
@@ -4205,8 +4205,8 @@ xychart-beta
         </div>
       </main>
     </div>
-    <script src="../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1700525733" defer></script>
+    <script src="../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1700697952" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -4235,27 +4235,27 @@ xychart-beta
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="../js/mathjax/tex-mml-chtml.js?1700525733"></script>
-    <script src="../js/d3/d3-color.min.js?1700525733" defer></script>
-    <script src="../js/d3/d3-dispatch.min.js?1700525733" defer></script>
-    <script src="../js/d3/d3-drag.min.js?1700525733" defer></script>
-    <script src="../js/d3/d3-ease.min.js?1700525733" defer></script>
-    <script src="../js/d3/d3-interpolate.min.js?1700525733" defer></script>
-    <script src="../js/d3/d3-selection.min.js?1700525733" defer></script>
-    <script src="../js/d3/d3-timer.min.js?1700525733" defer></script>
-    <script src="../js/d3/d3-transition.min.js?1700525733" defer></script>
-    <script src="../js/d3/d3-zoom.min.js?1700525733" defer></script>
-    <script src="../js/js-yaml.min.js?1700525733" defer></script>
-    <script src="../js/mermaid.min.js?1700525733" defer></script>
+    <script id="MathJax-script" async src="../js/mathjax/tex-mml-chtml.js?1700697952"></script>
+    <script src="../js/d3/d3-color.min.js?1700697952" defer></script>
+    <script src="../js/d3/d3-dispatch.min.js?1700697952" defer></script>
+    <script src="../js/d3/d3-drag.min.js?1700697952" defer></script>
+    <script src="../js/d3/d3-ease.min.js?1700697952" defer></script>
+    <script src="../js/d3/d3-interpolate.min.js?1700697952" defer></script>
+    <script src="../js/d3/d3-selection.min.js?1700697952" defer></script>
+    <script src="../js/d3/d3-timer.min.js?1700697952" defer></script>
+    <script src="../js/d3/d3-transition.min.js?1700697952" defer></script>
+    <script src="../js/d3/d3-zoom.min.js?1700697952" defer></script>
+    <script src="../js/js-yaml.min.js?1700697952" defer></script>
+    <script src="../js/mermaid.min.js?1700697952" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
     <script>window.noZensmooth = true;</script>
-    <script src="../js/swagger-ui/swagger-ui-bundle.js?1700525733" defer></script>
-    <script src="../js/swagger-ui/swagger-ui-standalone-preset.js?1700525733" defer></script>
+    <script src="../js/swagger-ui/swagger-ui-bundle.js?1700697952" defer></script>
+    <script src="../js/swagger-ui/swagger-ui-standalone-preset.js?1700697952" defer></script>
     <script>
-      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1700525733", assetsBuster:  1700525733  };
+      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1700697952", assetsBuster:  1700697952  };
     </script>
-    <script src="../js/theme.js?1700525733" defer></script>
+    <script src="../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/math/index.html b/shortcodes/math/index.html
index 2e24518b25..dcc62688ac 100644
--- a/shortcodes/math/index.html
+++ b/shortcodes/math/index.html
@@ -24,20 +24,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/math/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/math/index.xml" rel="alternate" type="application/rss+xml" title="Math :: Hugo Relearn Theme">
     <link href="../../shortcodes/math/index.print.html" rel="alternate" type="text/html" title="Math :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -399,12 +399,12 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525732" defer></script>
-        <script src="../../js/search.js?1700525732" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -494,9 +494,11 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -561,13 +563,13 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525732"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525732" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525732" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -596,7 +598,7 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1700525732"></script>
-    <script src="../../js/theme.js?1700525732" defer></script>
+    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1700697951"></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/shortcodes/math/index.print.html b/shortcodes/math/index.print.html
index d9ed2b4dc6..ae9b81f026 100644
--- a/shortcodes/math/index.print.html
+++ b/shortcodes/math/index.print.html
@@ -24,21 +24,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/math/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/math/index.html" rel="canonical" type="text/html" title="Math :: Hugo Relearn Theme">
     <link href="../../shortcodes/math/index.xml" rel="alternate" type="application/rss+xml" title="Math :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -48,7 +48,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -256,8 +256,8 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -286,7 +286,7 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1700525733"></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1700697952"></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/mermaid/index.html b/shortcodes/mermaid/index.html
index b52462e4de..42b0a9733b 100644
--- a/shortcodes/mermaid/index.html
+++ b/shortcodes/mermaid/index.html
@@ -24,20 +24,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/mermaid/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/mermaid/index.xml" rel="alternate" type="application/rss+xml" title="Mermaid :: Hugo Relearn Theme">
     <link href="../../shortcodes/mermaid/index.print.html" rel="alternate" type="text/html" title="Mermaid :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -883,12 +883,12 @@ xychart-beta
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525732" defer></script>
-        <script src="../../js/search.js?1700525732" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -978,9 +978,11 @@ xychart-beta
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -1045,27 +1047,27 @@ xychart-beta
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525732"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525732" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525732" defer></script>
-    <script src="../../js/d3/d3-color.min.js?1700525732" defer></script>
-    <script src="../../js/d3/d3-dispatch.min.js?1700525732" defer></script>
-    <script src="../../js/d3/d3-drag.min.js?1700525732" defer></script>
-    <script src="../../js/d3/d3-ease.min.js?1700525732" defer></script>
-    <script src="../../js/d3/d3-interpolate.min.js?1700525732" defer></script>
-    <script src="../../js/d3/d3-selection.min.js?1700525732" defer></script>
-    <script src="../../js/d3/d3-timer.min.js?1700525732" defer></script>
-    <script src="../../js/d3/d3-transition.min.js?1700525732" defer></script>
-    <script src="../../js/d3/d3-zoom.min.js?1700525732" defer></script>
-    <script src="../../js/js-yaml.min.js?1700525732" defer></script>
-    <script src="../../js/mermaid.min.js?1700525732" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/d3/d3-color.min.js?1700697951" defer></script>
+    <script src="../../js/d3/d3-dispatch.min.js?1700697951" defer></script>
+    <script src="../../js/d3/d3-drag.min.js?1700697951" defer></script>
+    <script src="../../js/d3/d3-ease.min.js?1700697951" defer></script>
+    <script src="../../js/d3/d3-interpolate.min.js?1700697951" defer></script>
+    <script src="../../js/d3/d3-selection.min.js?1700697951" defer></script>
+    <script src="../../js/d3/d3-timer.min.js?1700697951" defer></script>
+    <script src="../../js/d3/d3-transition.min.js?1700697951" defer></script>
+    <script src="../../js/d3/d3-zoom.min.js?1700697951" defer></script>
+    <script src="../../js/js-yaml.min.js?1700697951" defer></script>
+    <script src="../../js/mermaid.min.js?1700697951" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../js/theme.js?1700525732" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/shortcodes/mermaid/index.print.html b/shortcodes/mermaid/index.print.html
index 00e1cd61f6..c79e7ce84e 100644
--- a/shortcodes/mermaid/index.print.html
+++ b/shortcodes/mermaid/index.print.html
@@ -24,21 +24,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/mermaid/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/mermaid/index.html" rel="canonical" type="text/html" title="Mermaid :: Hugo Relearn Theme">
     <link href="../../shortcodes/mermaid/index.xml" rel="alternate" type="application/rss+xml" title="Mermaid :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -48,7 +48,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -728,22 +728,22 @@ xychart-beta
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-color.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-dispatch.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-drag.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-ease.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-interpolate.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-selection.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-timer.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-transition.min.js?1700525733" defer></script>
-    <script src="../../js/d3/d3-zoom.min.js?1700525733" defer></script>
-    <script src="../../js/js-yaml.min.js?1700525733" defer></script>
-    <script src="../../js/mermaid.min.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/d3/d3-color.min.js?1700697952" defer></script>
+    <script src="../../js/d3/d3-dispatch.min.js?1700697952" defer></script>
+    <script src="../../js/d3/d3-drag.min.js?1700697952" defer></script>
+    <script src="../../js/d3/d3-ease.min.js?1700697952" defer></script>
+    <script src="../../js/d3/d3-interpolate.min.js?1700697952" defer></script>
+    <script src="../../js/d3/d3-selection.min.js?1700697952" defer></script>
+    <script src="../../js/d3/d3-timer.min.js?1700697952" defer></script>
+    <script src="../../js/d3/d3-transition.min.js?1700697952" defer></script>
+    <script src="../../js/d3/d3-zoom.min.js?1700697952" defer></script>
+    <script src="../../js/js-yaml.min.js?1700697952" defer></script>
+    <script src="../../js/mermaid.min.js?1700697952" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/notice/index.html b/shortcodes/notice/index.html
index 073f987168..dcf313324c 100644
--- a/shortcodes/notice/index.html
+++ b/shortcodes/notice/index.html
@@ -24,20 +24,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/notice/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/notice/index.xml" rel="alternate" type="application/rss+xml" title="Notice :: Hugo Relearn Theme">
     <link href="../../shortcodes/notice/index.print.html" rel="alternate" type="text/html" title="Notice :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -570,12 +570,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525732" defer></script>
-        <script src="../../js/search.js?1700525732" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -665,9 +665,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -732,13 +734,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525732"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525732" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525732" defer></script>
-    <script src="../../js/theme.js?1700525732" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/shortcodes/notice/index.print.html b/shortcodes/notice/index.print.html
index fcc24ca1ea..d5f22a5236 100644
--- a/shortcodes/notice/index.print.html
+++ b/shortcodes/notice/index.print.html
@@ -24,21 +24,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/notice/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/notice/index.html" rel="canonical" type="text/html" title="Notice :: Hugo Relearn Theme">
     <link href="../../shortcodes/notice/index.xml" rel="alternate" type="application/rss+xml" title="Notice :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -48,7 +48,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -432,8 +432,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/openapi/index.html b/shortcodes/openapi/index.html
index ef4e23dea2..2983154223 100644
--- a/shortcodes/openapi/index.html
+++ b/shortcodes/openapi/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/openapi/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/openapi/index.xml" rel="alternate" type="application/rss+xml" title="OpenAPI :: Hugo Relearn Theme">
     <link href="../../shortcodes/openapi/index.print.html" rel="alternate" type="text/html" title="OpenAPI :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -228,7 +228,7 @@
 <div class="sc-openapi-wrapper is-loading helper-loading-container">
   <div
     class="sc-openapi-container"
-    id="R-openapi-31c57f1f6f0cd6725a0f68d0e49958f1"
+    id="R-openapi-401e1460b9fe01fb80df2bab2dfc253d"
     data-openapi-url="../../shortcodes/openapi/petstore.json"
   ></div>
 </div>
@@ -321,12 +321,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -416,9 +416,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -483,19 +485,19 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
     <script>window.noZensmooth = true;</script>
-    <script src="../../js/swagger-ui/swagger-ui-bundle.js?1700525733" defer></script>
-    <script src="../../js/swagger-ui/swagger-ui-standalone-preset.js?1700525733" defer></script>
+    <script src="../../js/swagger-ui/swagger-ui-bundle.js?1700697952" defer></script>
+    <script src="../../js/swagger-ui/swagger-ui-standalone-preset.js?1700697952" defer></script>
     <script>
-      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1700525733", assetsBuster:  1700525733  };
+      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1700697952", assetsBuster:  1700697952  };
     </script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/openapi/index.print.html b/shortcodes/openapi/index.print.html
index 7316e0f9d9..ff63e22006 100644
--- a/shortcodes/openapi/index.print.html
+++ b/shortcodes/openapi/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/openapi/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/openapi/index.html" rel="canonical" type="text/html" title="OpenAPI :: Hugo Relearn Theme">
     <link href="../../shortcodes/openapi/index.xml" rel="alternate" type="application/rss+xml" title="OpenAPI :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -175,7 +175,7 @@
 <div class="sc-openapi-wrapper is-loading helper-loading-container">
   <div
     class="sc-openapi-container"
-    id="R-openapi-31c57f1f6f0cd6725a0f68d0e49958f1"
+    id="R-openapi-401e1460b9fe01fb80df2bab2dfc253d"
     data-openapi-url="../../shortcodes/openapi/petstore.json"
   ></div>
 </div>
@@ -187,14 +187,14 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
     <script>window.noZensmooth = true;</script>
-    <script src="../../js/swagger-ui/swagger-ui-bundle.js?1700525733" defer></script>
-    <script src="../../js/swagger-ui/swagger-ui-standalone-preset.js?1700525733" defer></script>
+    <script src="../../js/swagger-ui/swagger-ui-bundle.js?1700697952" defer></script>
+    <script src="../../js/swagger-ui/swagger-ui-standalone-preset.js?1700697952" defer></script>
     <script>
-      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1700525733", assetsBuster:  1700525733  };
+      window.themeUseOpenapi = { css: "/js/swagger-ui/swagger-ui.css?1700697952", assetsBuster:  1700697952  };
     </script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/siteparam/index.html b/shortcodes/siteparam/index.html
index 5bff78a744..4ccf549481 100644
--- a/shortcodes/siteparam/index.html
+++ b/shortcodes/siteparam/index.html
@@ -24,20 +24,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/siteparam/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/siteparam/index.xml" rel="alternate" type="application/rss+xml" title="SiteParam :: Hugo Relearn Theme">
     <link href="../../shortcodes/siteparam/index.print.html" rel="alternate" type="text/html" title="SiteParam :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -230,13 +230,13 @@
 <p>To use formatted parameter, add this in your <code>config.toml</code>:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">markup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">renderer</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">    <span class="nx">unsafe</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="1b46857fb21a796972cdcf06ab971698">
+<div class="tab-panel" data-tab-group="d07e8b5057603b927da29a8c849628f4">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('1b46857fb21a796972cdcf06ab971698','configtoml')"
+      onclick="switchTab('d07e8b5057603b927da29a8c849628f4','configtoml')"
     >
       <span class="tab-nav-text">config.toml</span>
     </button>
@@ -343,12 +343,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525732" defer></script>
-        <script src="../../js/search.js?1700525732" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -438,9 +438,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -505,13 +507,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525732"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525732" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525732" defer></script>
-    <script src="../../js/theme.js?1700525732" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/shortcodes/siteparam/index.print.html b/shortcodes/siteparam/index.print.html
index b6f8f0e34e..02eecc2b43 100644
--- a/shortcodes/siteparam/index.print.html
+++ b/shortcodes/siteparam/index.print.html
@@ -24,21 +24,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/siteparam/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/siteparam/index.html" rel="canonical" type="text/html" title="SiteParam :: Hugo Relearn Theme">
     <link href="../../shortcodes/siteparam/index.xml" rel="alternate" type="application/rss+xml" title="SiteParam :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -48,7 +48,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -176,13 +176,13 @@
 <p>To use formatted parameter, add this in your <code>config.toml</code>:</p>
 <div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">markup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">renderer</span><span class="p">]</span>
 </span></span><span class="line"><span class="cl">    <span class="nx">unsafe</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="1b46857fb21a796972cdcf06ab971698">
+<div class="tab-panel" data-tab-group="d07e8b5057603b927da29a8c849628f4">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="configtoml"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('1b46857fb21a796972cdcf06ab971698','configtoml')"
+      onclick="switchTab('d07e8b5057603b927da29a8c849628f4','configtoml')"
     >
       <span class="tab-nav-text">config.toml</span>
     </button>
@@ -208,8 +208,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/tab/index.html b/shortcodes/tab/index.html
index 0eb9a72d69..1af172c9ae 100644
--- a/shortcodes/tab/index.html
+++ b/shortcodes/tab/index.html
@@ -24,20 +24,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tab/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/tab/index.xml" rel="alternate" type="application/rss+xml" title="Tab :: Hugo Relearn Theme">
     <link href="../../shortcodes/tab/index.print.html" rel="alternate" type="text/html" title="Tab :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -153,13 +153,13 @@
 <p>This is especially useful if you want to flag your code example with an explicit language.</p>
 <p>If you want multiple tabs grouped together you can wrap your tabs into the <a href="../../shortcodes/tabs/index.html"><code>tabs</code> shortcode</a>.</p>
 
-<div class="tab-panel" data-tab-group="9242f3a386fa1942130fb99f6ac4fd35">
+<div class="tab-panel" data-tab-group="da2b821db51f322c8c373d0b94f996b8">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('9242f3a386fa1942130fb99f6ac4fd35','c')"
+      onclick="switchTab('da2b821db51f322c8c373d0b94f996b8','c')"
     >
       <span class="tab-nav-text">c</span>
     </button>
@@ -264,13 +264,13 @@
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="bd8f9545f37328749dc3ae32efbd1d6e">
+<div class="tab-panel" data-tab-group="8737e20f575e6139a356b02c483a0778">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="code"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('bd8f9545f37328749dc3ae32efbd1d6e','code')"
+      onclick="switchTab('8737e20f575e6139a356b02c483a0778','code')"
     >
       <span class="tab-nav-text">Code</span>
     </button>
@@ -292,13 +292,13 @@
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="d346ec498d2a6be1e4b78c4a1e68f82c">
+<div class="tab-panel" data-tab-group="24b6caf1eb9f4644a3790f55f20a1206">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="mixed"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('d346ec498d2a6be1e4b78c4a1e68f82c','mixed')"
+      onclick="switchTab('24b6caf1eb9f4644a3790f55f20a1206','mixed')"
     >
       <span class="tab-nav-text"><em><strong>Mixed</strong></em></span>
     </button>
@@ -343,41 +343,41 @@
 </span></span><span class="line"><span class="cl"><span class="nx">This</span> <span class="nx">will</span> <span class="nx">set</span> <span class="nx">the</span> <span class="nx">background</span> <span class="nx">to</span> <span class="nx">a</span> <span class="nx">lighter</span> <span class="nx">version</span> <span class="nx">of</span> <span class="nx">the</span> <span class="nx">chosen</span> <span class="nx">CSS</span> <span class="nx">color</span> <span class="nx">value</span> <span class="nx">and</span> <span class="nx">also</span> <span class="nx">affects</span> <span class="nx">the</span> <span class="nx">chosen</span> <span class="nx">icon</span><span class="p">.</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">&gt;}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="65834ff20f7fc3818570073314217e93">
+<div class="tab-panel" data-tab-group="a1d9b98042d25e3c30eabc54517a4c84">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="just-colored-style"
       class="tab-nav-button tab-panel-style cstyle blue active" tabindex="-1"
-      onclick="switchTab('65834ff20f7fc3818570073314217e93','just-colored-style')"
+      onclick="switchTab('a1d9b98042d25e3c30eabc54517a4c84','just-colored-style')"
     >
       <span class="tab-nav-text">just colored style</span>
     </button>
     <button
       data-tab-item="just-color"
       class="tab-nav-button tab-panel-style cstyle filled" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('65834ff20f7fc3818570073314217e93','just-color')"
+      onclick="switchTab('a1d9b98042d25e3c30eabc54517a4c84','just-color')"
     >
       <span class="tab-nav-text">just color</span>
     </button>
     <button
       data-tab-item="default-style-and-color"
       class="tab-nav-button tab-panel-style cstyle default" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('65834ff20f7fc3818570073314217e93','default-style-and-color')"
+      onclick="switchTab('a1d9b98042d25e3c30eabc54517a4c84','default-style-and-color')"
     >
       <span class="tab-nav-text">default style and color</span>
     </button>
     <button
       data-tab-item="just-severity-stylefa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info"
-      onclick="switchTab('65834ff20f7fc3818570073314217e93','just-severity-stylefa-fw-fas-fa-info-circle')"
+      onclick="switchTab('a1d9b98042d25e3c30eabc54517a4c84','just-severity-stylefa-fw-fas-fa-info-circle')"
     >
       <span class="tab-nav-text"><i class="fa-fw fas fa-info-circle"></i> just severity style</span>
     </button>
     <button
       data-tab-item="severity-style-and-colorfa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('65834ff20f7fc3818570073314217e93','severity-style-and-colorfa-fw-fas-fa-info-circle')"
+      onclick="switchTab('a1d9b98042d25e3c30eabc54517a4c84','severity-style-and-colorfa-fw-fas-fa-info-circle')"
     >
       <span class="tab-nav-text"><i class="fa-fw fas fa-info-circle"></i> severity style and color</span>
     </button>
@@ -519,12 +519,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525732" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525732" defer></script>
-        <script src="../../js/search.js?1700525732" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -614,9 +614,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -681,13 +683,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525732"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525732" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525732" defer></script>
-    <script src="../../js/theme.js?1700525732" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/shortcodes/tab/index.print.html b/shortcodes/tab/index.print.html
index 246dd08367..a85b5aee05 100644
--- a/shortcodes/tab/index.print.html
+++ b/shortcodes/tab/index.print.html
@@ -24,21 +24,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tab/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/tab/index.html" rel="canonical" type="text/html" title="Tab :: Hugo Relearn Theme">
     <link href="../../shortcodes/tab/index.xml" rel="alternate" type="application/rss+xml" title="Tab :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -48,7 +48,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -98,13 +98,13 @@
 <p>This is especially useful if you want to flag your code example with an explicit language.</p>
 <p>If you want multiple tabs grouped together you can wrap your tabs into the <a href="../../shortcodes/tabs/index.html"><code>tabs</code> shortcode</a>.</p>
 
-<div class="tab-panel" data-tab-group="9242f3a386fa1942130fb99f6ac4fd35">
+<div class="tab-panel" data-tab-group="da2b821db51f322c8c373d0b94f996b8">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('9242f3a386fa1942130fb99f6ac4fd35','c')"
+      onclick="switchTab('da2b821db51f322c8c373d0b94f996b8','c')"
     >
       <span class="tab-nav-text">c</span>
     </button>
@@ -209,13 +209,13 @@
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="bd8f9545f37328749dc3ae32efbd1d6e">
+<div class="tab-panel" data-tab-group="8737e20f575e6139a356b02c483a0778">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="code"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('bd8f9545f37328749dc3ae32efbd1d6e','code')"
+      onclick="switchTab('8737e20f575e6139a356b02c483a0778','code')"
     >
       <span class="tab-nav-text">Code</span>
     </button>
@@ -237,13 +237,13 @@
 </span></span></span><span class="line"><span class="cl"><span class="s">printf(&#34;Hello World!&#34;);
 </span></span></span><span class="line"><span class="cl"><span class="s">```</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="d346ec498d2a6be1e4b78c4a1e68f82c">
+<div class="tab-panel" data-tab-group="24b6caf1eb9f4644a3790f55f20a1206">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="mixed"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('d346ec498d2a6be1e4b78c4a1e68f82c','mixed')"
+      onclick="switchTab('24b6caf1eb9f4644a3790f55f20a1206','mixed')"
     >
       <span class="tab-nav-text"><em><strong>Mixed</strong></em></span>
     </button>
@@ -288,41 +288,41 @@
 </span></span><span class="line"><span class="cl"><span class="nx">This</span> <span class="nx">will</span> <span class="nx">set</span> <span class="nx">the</span> <span class="nx">background</span> <span class="nx">to</span> <span class="nx">a</span> <span class="nx">lighter</span> <span class="nx">version</span> <span class="nx">of</span> <span class="nx">the</span> <span class="nx">chosen</span> <span class="nx">CSS</span> <span class="nx">color</span> <span class="nx">value</span> <span class="nx">and</span> <span class="nx">also</span> <span class="nx">affects</span> <span class="nx">the</span> <span class="nx">chosen</span> <span class="nx">icon</span><span class="p">.</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
 </span></span><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">&gt;}}</span></span></span></code></pre></div>
-<div class="tab-panel" data-tab-group="65834ff20f7fc3818570073314217e93">
+<div class="tab-panel" data-tab-group="a1d9b98042d25e3c30eabc54517a4c84">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="just-colored-style"
       class="tab-nav-button tab-panel-style cstyle blue active" tabindex="-1"
-      onclick="switchTab('65834ff20f7fc3818570073314217e93','just-colored-style')"
+      onclick="switchTab('a1d9b98042d25e3c30eabc54517a4c84','just-colored-style')"
     >
       <span class="tab-nav-text">just colored style</span>
     </button>
     <button
       data-tab-item="just-color"
       class="tab-nav-button tab-panel-style cstyle filled" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('65834ff20f7fc3818570073314217e93','just-color')"
+      onclick="switchTab('a1d9b98042d25e3c30eabc54517a4c84','just-color')"
     >
       <span class="tab-nav-text">just color</span>
     </button>
     <button
       data-tab-item="default-style-and-color"
       class="tab-nav-button tab-panel-style cstyle default" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('65834ff20f7fc3818570073314217e93','default-style-and-color')"
+      onclick="switchTab('a1d9b98042d25e3c30eabc54517a4c84','default-style-and-color')"
     >
       <span class="tab-nav-text">default style and color</span>
     </button>
     <button
       data-tab-item="just-severity-stylefa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info"
-      onclick="switchTab('65834ff20f7fc3818570073314217e93','just-severity-stylefa-fw-fas-fa-info-circle')"
+      onclick="switchTab('a1d9b98042d25e3c30eabc54517a4c84','just-severity-stylefa-fw-fas-fa-info-circle')"
     >
       <span class="tab-nav-text"><i class="fa-fw fas fa-info-circle"></i> just severity style</span>
     </button>
     <button
       data-tab-item="severity-style-and-colorfa-fw-fas-fa-info-circle"
       class="tab-nav-button tab-panel-style cstyle info" style="--VARIABLE-BOX-color: blue;"
-      onclick="switchTab('65834ff20f7fc3818570073314217e93','severity-style-and-colorfa-fw-fas-fa-info-circle')"
+      onclick="switchTab('a1d9b98042d25e3c30eabc54517a4c84','severity-style-and-colorfa-fw-fas-fa-info-circle')"
     >
       <span class="tab-nav-text"><i class="fa-fw fas fa-info-circle"></i> severity style and color</span>
     </button>
@@ -383,8 +383,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/shortcodes/tabs/index.html b/shortcodes/tabs/index.html
index 25a578cde4..ae966025a9 100644
--- a/shortcodes/tabs/index.html
+++ b/shortcodes/tabs/index.html
@@ -24,20 +24,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tabs/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/tabs/index.xml" rel="alternate" type="application/rss+xml" title="Tabs :: Hugo Relearn Theme">
     <link href="../../shortcodes/tabs/index.print.html" rel="alternate" type="text/html" title="Tabs :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -152,27 +152,27 @@
 <p>This comes in handy eg. for providing code snippets for multiple languages.</p>
 <p>If you just want a single tab you can instead call the <a href="../../shortcodes/tab/index.html"><code>tab</code> shortcode</a> standalone.</p>
 
-<div class="tab-panel" data-tab-group="96759f36939a6bd9dc13a9e6fadde7a5">
+<div class="tab-panel" data-tab-group="4bd0d7ecdad40954b0cba4a271750be9">
   <div class="tab-nav">
     <div class="tab-nav-title">hello.</div>
     <button
       data-tab-item="py"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('96759f36939a6bd9dc13a9e6fadde7a5','py')"
+      onclick="switchTab('4bd0d7ecdad40954b0cba4a271750be9','py')"
     >
       <span class="tab-nav-text">py</span>
     </button>
     <button
       data-tab-item="sh"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('96759f36939a6bd9dc13a9e6fadde7a5','sh')"
+      onclick="switchTab('4bd0d7ecdad40954b0cba4a271750be9','sh')"
     >
       <span class="tab-nav-text">sh</span>
     </button>
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('96759f36939a6bd9dc13a9e6fadde7a5','c')"
+      onclick="switchTab('4bd0d7ecdad40954b0cba4a271750be9','c')"
     >
       <span class="tab-nav-text">c</span>
     </button>
@@ -320,27 +320,27 @@
 <p>See what happens to the tab views while you select different tabs.</p>
 <p>While pressing a tab of Group A switches all tab views of Group A in sync (if the tab is available), the tabs of Group B are left untouched.</p>
 
-<div class="tab-panel" data-tab-group="8baba5e2ecbbbc3446c43b7cdc129fae">
+<div class="tab-panel" data-tab-group="a8b623121a5c785743ee415ea597c745">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="group-a-tab-view-1"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('8baba5e2ecbbbc3446c43b7cdc129fae','group-a-tab-view-1')"
+      onclick="switchTab('a8b623121a5c785743ee415ea597c745','group-a-tab-view-1')"
     >
       <span class="tab-nav-text">Group A, Tab View 1</span>
     </button>
     <button
       data-tab-item="group-a-tab-view-2"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('8baba5e2ecbbbc3446c43b7cdc129fae','group-a-tab-view-2')"
+      onclick="switchTab('a8b623121a5c785743ee415ea597c745','group-a-tab-view-2')"
     >
       <span class="tab-nav-text">Group A, Tab View 2</span>
     </button>
     <button
       data-tab-item="group-b"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('8baba5e2ecbbbc3446c43b7cdc129fae','group-b')"
+      onclick="switchTab('a8b623121a5c785743ee415ea597c745','group-b')"
     >
       <span class="tab-nav-text">Group B</span>
     </button>
@@ -776,12 +776,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697951" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697951" defer></script>
+        <script src="../../js/search.js?1700697951" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -871,9 +871,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -938,13 +940,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697951"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697951" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697951" defer></script>
+    <script src="../../js/theme.js?1700697951" defer></script>
   </body>
 </html>
diff --git a/shortcodes/tabs/index.print.html b/shortcodes/tabs/index.print.html
index 003a0c8885..5964d4b8c1 100644
--- a/shortcodes/tabs/index.print.html
+++ b/shortcodes/tabs/index.print.html
@@ -24,21 +24,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tabs/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/tabs/index.html" rel="canonical" type="text/html" title="Tabs :: Hugo Relearn Theme">
     <link href="../../shortcodes/tabs/index.xml" rel="alternate" type="application/rss+xml" title="Tabs :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../../js/url.js?1700525733"></script>
-    <script src="../../js/variant.js?1700525733"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../../js/url.js?1700697952"></script>
+    <script src="../../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -48,7 +48,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -98,27 +98,27 @@
 <p>This comes in handy eg. for providing code snippets for multiple languages.</p>
 <p>If you just want a single tab you can instead call the <a href="../../shortcodes/tab/index.html"><code>tab</code> shortcode</a> standalone.</p>
 
-<div class="tab-panel" data-tab-group="96759f36939a6bd9dc13a9e6fadde7a5">
+<div class="tab-panel" data-tab-group="4bd0d7ecdad40954b0cba4a271750be9">
   <div class="tab-nav">
     <div class="tab-nav-title">hello.</div>
     <button
       data-tab-item="py"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('96759f36939a6bd9dc13a9e6fadde7a5','py')"
+      onclick="switchTab('4bd0d7ecdad40954b0cba4a271750be9','py')"
     >
       <span class="tab-nav-text">py</span>
     </button>
     <button
       data-tab-item="sh"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('96759f36939a6bd9dc13a9e6fadde7a5','sh')"
+      onclick="switchTab('4bd0d7ecdad40954b0cba4a271750be9','sh')"
     >
       <span class="tab-nav-text">sh</span>
     </button>
     <button
       data-tab-item="c"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('96759f36939a6bd9dc13a9e6fadde7a5','c')"
+      onclick="switchTab('4bd0d7ecdad40954b0cba4a271750be9','c')"
     >
       <span class="tab-nav-text">c</span>
     </button>
@@ -266,27 +266,27 @@
 <p>See what happens to the tab views while you select different tabs.</p>
 <p>While pressing a tab of Group A switches all tab views of Group A in sync (if the tab is available), the tabs of Group B are left untouched.</p>
 
-<div class="tab-panel" data-tab-group="8baba5e2ecbbbc3446c43b7cdc129fae">
+<div class="tab-panel" data-tab-group="a8b623121a5c785743ee415ea597c745">
   <div class="tab-nav">
     <div class="tab-nav-title">&#8203;</div>
     <button
       data-tab-item="group-a-tab-view-1"
       class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
-      onclick="switchTab('8baba5e2ecbbbc3446c43b7cdc129fae','group-a-tab-view-1')"
+      onclick="switchTab('a8b623121a5c785743ee415ea597c745','group-a-tab-view-1')"
     >
       <span class="tab-nav-text">Group A, Tab View 1</span>
     </button>
     <button
       data-tab-item="group-a-tab-view-2"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('8baba5e2ecbbbc3446c43b7cdc129fae','group-a-tab-view-2')"
+      onclick="switchTab('a8b623121a5c785743ee415ea597c745','group-a-tab-view-2')"
     >
       <span class="tab-nav-text">Group A, Tab View 2</span>
     </button>
     <button
       data-tab-item="group-b"
       class="tab-nav-button tab-panel-style cstyle initial"
-      onclick="switchTab('8baba5e2ecbbbc3446c43b7cdc129fae','group-b')"
+      onclick="switchTab('a8b623121a5c785743ee415ea597c745','group-b')"
     >
       <span class="tab-nav-text">Group B</span>
     </button>
@@ -641,8 +641,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/showcase/index.html b/showcase/index.html
index eec6907467..d62854339b 100644
--- a/showcase/index.html
+++ b/showcase/index.html
@@ -23,20 +23,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/showcase/index.html" rel="alternate" hreflang="pir">
     <link href="../showcase/index.xml" rel="alternate" type="application/rss+xml" title="Showcase :: Hugo Relearn Theme">
     <link href="../showcase/index.print.html" rel="alternate" type="text/html" title="Showcase :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../js/url.js?1700525732"></script>
-    <script src="../js/variant.js?1700525732"></script>
+    <link href="../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../js/url.js?1700697951"></script>
+    <script src="../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -46,7 +46,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -240,12 +240,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../js/search.js?1700525733" defer></script>
+        <script src="../js/auto-complete.js?1700697952" defer></script>
+        <script src="../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -335,9 +335,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -402,13 +404,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../js/github-buttons.js?1700525733"></script>
+          <script async src="../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../js/theme.js?1700525733" defer></script>
+    <script src="../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/showcase/index.print.html b/showcase/index.print.html
index 9750e748bb..76cb612199 100644
--- a/showcase/index.print.html
+++ b/showcase/index.print.html
@@ -23,21 +23,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/showcase/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/showcase/index.html" rel="canonical" type="text/html" title="Showcase :: Hugo Relearn Theme">
     <link href="../showcase/index.xml" rel="alternate" type="application/rss+xml" title="Showcase :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1700525733" rel="stylesheet">
-    <link href="../css/auto-complete.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1700525733" rel="stylesheet">
-    <link href="../css/fonts.css?1700525733" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700525733" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1700525733" rel="stylesheet">
-    <link href="../css/theme-auto.css?1700525733" rel="stylesheet" id="R-variant-style">
-    <link href="../css/variant.css?1700525733" rel="stylesheet">
-    <link href="../css/print.css?1700525733" rel="stylesheet" media="print">
-    <link href="../css/format-print.css?1700525733" rel="stylesheet">
-    <link href="../css/ie.css?1700525733" rel="stylesheet">
-    <script src="../js/url.js?1700525733"></script>
-    <script src="../js/variant.js?1700525733"></script>
+    <link href="../css/fontawesome-all.min.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1700697952" rel="stylesheet">
+    <link href="../css/auto-complete.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1700697952" rel="stylesheet">
+    <link href="../css/fonts.css?1700697952" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700697952" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1700697952" rel="stylesheet">
+    <link href="../css/theme-relearn-auto.css?1700697952" rel="stylesheet" id="R-variant-style">
+    <link href="../css/variant.css?1700697952" rel="stylesheet">
+    <link href="../css/print.css?1700697952" rel="stylesheet" media="print">
+    <link href="../css/format-print.css?1700697952" rel="stylesheet">
+    <link href="../css/ie.css?1700697952" rel="stylesheet">
+    <script src="../js/url.js?1700697952"></script>
+    <script src="../js/variant.js?1700697952"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -47,7 +47,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -112,8 +112,8 @@
         </div>
       </main>
     </div>
-    <script src="../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../js/theme.js?1700525733" defer></script>
+    <script src="../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/tags/children/index.html b/tags/children/index.html
index 4d75817e7c..56085d52e7 100644
--- a/tags/children/index.html
+++ b/tags/children/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/children/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/children/index.html" rel="alternate" hreflang="pir">
     <link href="../../tags/children/index.xml" rel="alternate" type="application/rss+xml" title="Children :: Tag :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -230,12 +230,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -325,9 +325,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -392,13 +394,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/tags/config/index.html b/tags/config/index.html
index 049cad55d6..bf2b388c3d 100644
--- a/tags/config/index.html
+++ b/tags/config/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/config/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/config/index.html" rel="alternate" hreflang="pir">
     <link href="../../tags/config/index.xml" rel="alternate" type="application/rss+xml" title="config :: Tag :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -217,12 +217,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -312,9 +312,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -379,13 +381,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/tags/content/index.html b/tags/content/index.html
index bef0537da2..c7d3c02200 100644
--- a/tags/content/index.html
+++ b/tags/content/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/content/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/content/index.html" rel="alternate" hreflang="pir">
     <link href="../../tags/content/index.xml" rel="alternate" type="application/rss+xml" title="Content :: Tag :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -217,12 +217,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -312,9 +312,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -379,13 +381,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/tags/documentation/index.html b/tags/documentation/index.html
index 883d3b1298..4b59e559ee 100644
--- a/tags/documentation/index.html
+++ b/tags/documentation/index.html
@@ -19,20 +19,20 @@
     <meta property="og:site_name" content="Hugo Relearn Theme">
     <title>documentation :: Tag :: Hugo Relearn Theme</title>
     <link href="../../tags/documentation/index.xml" rel="alternate" type="application/rss+xml" title="documentation :: Tag :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -42,7 +42,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -214,12 +214,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -308,9 +308,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -375,13 +377,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/tags/headless/index.html b/tags/headless/index.html
index 873e75392b..995e09d470 100644
--- a/tags/headless/index.html
+++ b/tags/headless/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/headless/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/headless/index.html" rel="alternate" hreflang="pir">
     <link href="../../tags/headless/index.xml" rel="alternate" type="application/rss+xml" title="headless :: Tag :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -208,12 +208,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -303,9 +303,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -370,13 +372,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/tags/index.html b/tags/index.html
index 12b3fb8373..81dd63b3c4 100644
--- a/tags/index.html
+++ b/tags/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/index.html" rel="alternate" hreflang="pir">
-    <link href="../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../js/url.js?1700525732"></script>
-    <script src="../js/variant.js?1700525732"></script>
+    <link href="../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../js/url.js?1700697951"></script>
+    <script src="../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -247,12 +247,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../js/search.js?1700525733" defer></script>
+        <script src="../js/auto-complete.js?1700697952" defer></script>
+        <script src="../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -342,9 +342,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -409,13 +411,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../js/github-buttons.js?1700525733"></script>
+          <script async src="../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../js/theme.js?1700525733" defer></script>
+    <script src="../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/tags/its-hidden/index.html b/tags/its-hidden/index.html
index 59a13cbb13..934f095a21 100644
--- a/tags/its-hidden/index.html
+++ b/tags/its-hidden/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/its-hidden/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/its-hidden/index.html" rel="alternate" hreflang="pir">
     <link href="../../tags/its-hidden/index.xml" rel="alternate" type="application/rss+xml" title="a secret :: Tag :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -232,12 +232,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -327,9 +327,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -394,13 +396,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/tags/non-hidden/index.html b/tags/non-hidden/index.html
index 816a89e546..3152e69fd3 100644
--- a/tags/non-hidden/index.html
+++ b/tags/non-hidden/index.html
@@ -22,20 +22,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/non-hidden/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/non-hidden/index.html" rel="alternate" hreflang="pir">
     <link href="../../tags/non-hidden/index.xml" rel="alternate" type="application/rss+xml" title="non-hidden :: Tag :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -45,7 +45,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -224,12 +224,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -319,9 +319,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -386,13 +388,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>
diff --git a/tags/tutorial/index.html b/tags/tutorial/index.html
index c78e677b03..8267406428 100644
--- a/tags/tutorial/index.html
+++ b/tags/tutorial/index.html
@@ -19,20 +19,20 @@
     <meta property="og:site_name" content="Hugo Relearn Theme">
     <title>tutorial :: Tag :: Hugo Relearn Theme</title>
     <link href="../../tags/tutorial/index.xml" rel="alternate" type="application/rss+xml" title="tutorial :: Tag :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1700525732" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1700697951" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/nucleus.css?1700525732" rel="stylesheet">
-    <link href="../../css/auto-complete.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1700525732" rel="stylesheet">
-    <link href="../../css/fonts.css?1700525732" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700525732" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1700525732" rel="stylesheet">
-    <link href="../../css/theme-auto.css?1700525732" rel="stylesheet" id="R-variant-style">
-    <link href="../../css/variant.css?1700525732" rel="stylesheet">
-    <link href="../../css/print.css?1700525732" rel="stylesheet" media="print">
-    <link href="../../css/ie.css?1700525732" rel="stylesheet">
-    <script src="../../js/url.js?1700525732"></script>
-    <script src="../../js/variant.js?1700525732"></script>
+    <link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/nucleus.css?1700697951" rel="stylesheet">
+    <link href="../../css/auto-complete.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1700697951" rel="stylesheet">
+    <link href="../../css/fonts.css?1700697951" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1700697951" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1700697951" rel="stylesheet">
+    <link href="../../css/theme-relearn-auto.css?1700697951" rel="stylesheet" id="R-variant-style">
+    <link href="../../css/variant.css?1700697951" rel="stylesheet">
+    <link href="../../css/print.css?1700697951" rel="stylesheet" media="print">
+    <link href="../../css/ie.css?1700697951" rel="stylesheet">
+    <script src="../../js/url.js?1700697951"></script>
+    <script src="../../js/variant.js?1700697951"></script>
     <script>
       // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
       // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
@@ -42,7 +42,7 @@
       window.relearn = window.relearn || {};
       window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
       // variant stuff
-      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
       // translations
       window.T_Copy_to_clipboard = `Copy to clipboard`;
       window.T_Copied_to_clipboard = `Copied to clipboard!`;
@@ -214,12 +214,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1700525733" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1700525733" defer></script>
-        <script src="../../js/search.js?1700525733" defer></script>
+        <script src="../../js/auto-complete.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1700697952" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1700697952" defer></script>
+        <script src="../../js/search.js?1700697952" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation">
         <hr class="padding">
@@ -308,9 +308,11 @@
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">Theme</label>
                     <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                      <option id="R-auto" value="auto" selected>Auto</option>
+                      <option id="R-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
                       <option id="R-relearn-light" value="relearn-light">Relearn Light</option>
                       <option id="R-relearn-dark" value="relearn-dark">Relearn Dark</option>
+                      <option id="R-relearn-bright" value="relearn-bright">Relearn Bright</option>
+                      <option id="R-zen-auto" value="zen-auto">Zen Light/Dark</option>
                       <option id="R-zen-light" value="zen-light">Zen Light</option>
                       <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                       <option id="R-neon" value="neon">Neon</option>
@@ -375,13 +377,13 @@
               setTimeout( githubButtonsInit, 400 );
             });
           </script>
-          <script async src="../../js/github-buttons.js?1700525733"></script>
+          <script async src="../../js/github-buttons.js?1700697952"></script>
           </div>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1700525733" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1700525733" defer></script>
-    <script src="../../js/theme.js?1700525733" defer></script>
+    <script src="../../js/clipboard.min.js?1700697952" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1700697952" defer></script>
+    <script src="../../js/theme.js?1700697952" defer></script>
   </body>
 </html>