Merge pull request #146 from gethinode/color

Refinement

.eslintignore

@@ -1,3 +1,4 @@
+assets/js/color.js
 assets/js/flexsearch.js
 assets/js/vendor
 node_modules

.stylelintignore

@@ -1,5 +1,7 @@
 assets/scss/common/_variables.scss
-assets/scss/components/_syntax.scss
+assets/scss/components/_syntax-dark.scss
+assets/scss/components/_syntax-light.scss
+assets/scss/hotfix
 assets/scss/vendor
 assets/scss/app.scss
 node_modules

README.md

@@ -54,17 +54,15 @@ Hinode is a clean documentation and blog theme for [Hugo][hugo], an open-source
 
 Additional features include:
 
-- Comments
-- Social links
-- Blog pagination
-- Code highlighting
-- Command prompt
-- Color customization
-- Language switcher
+- Support for multiple languages
+- Reusable Bootstrap components through configurable shortcodes and partials
+- Embedded comments through light-weight integration with GitHub via [utteranc.es][utterances]
+- Integrated sidebar navigation for content-heavy sections, such as documentation pages
+- Reponsive image handling for multiple screen sizes and resolutions
+- Optimized search results, scoring 100 points for SEO on [PageSpeed Insights][pagespeed]
+- Secure by default, scoring A+ on [Mozilla Observatory test][observatory]
 
-<!-- TODO: add tutorial deep-link 
-Detailed background information is available on the author's [personal blog][blog].
--->
+Detailed information about Hinode is available on the [official website][website].
 
 ## Prerequisites
 
@@ -74,56 +72,39 @@ Hinode requires Git, Node.js and npm for local development and testing. Download
 
 Start a new Hinode project in three steps:
 
-### 1. Create a new site
+1. Create a new site
 
-Hinode is available as a [child theme][repository_child], and a [main theme][repository]. The child theme uses [npm][npm] to link to the latest available version of Hinode. As such, it is less applicable if you plan to customize a lot. Vice versa, the main theme allows for heavy customization, but is not synchronized with the latest available Hinode theme automatically.
+    Hinode is available as a [child theme][repository_child], and a [main theme][repository]. The child theme uses [npm][npm] to link to the latest available version of Hinode. Unless you plan to customize a lot, it is recommended to use the child theme:
 
-Not quite sure? Use the Hinode child theme.
+    ```bash
+    git clone https://github.com/gethinode/child.git my-hinode-site && cd my-hinode-site
+    ```
 
-#### Hinode child theme
+    Use the main theme if you intend to customize the base code:
 
-```bash
-git clone https://github.com/gethinode/child.git my-hinode-site && cd my-hinode-site
-```
+    ```bash
+    git clone https://github.com/gethinode/hinode.git my-hinode-site && cd my-hinode-site
+    ```
 
-#### Hinode main theme
+1. Install dependencies
 
-```bash
-git clone https://github.com/gethinode/hinode.git my-hinode-site && cd my-hinode-site
-```
+    ```bash
+    npm install
+    ```
 
-### 2. Install dependencies
+1. Start development server
 
-```bash
-npm install
-```
-
-### 3. Start development server
-
-```bash
-npm run start
-```
+    ```bash
+    npm run start
+    ```
 
 ## Configuration
 
-The main site configuration is available in `./config/_default`. Some remarks:
-
-- **Menu items** - `menus/menus.en.toml` contains language-specific items for the navigation bar and social media links for the home page's footer.
-- **Content** - Ensure the `mainSections` in `config.toml` is synchronized with the `content` folder, default values are `["blog", "projects"]`.
-- **Theme style** - Update `primary` and `themeOpacity` within the `[style]` section of `params.toml` to update the site's primary color and opacity. Bootstrap's other key colors can be changed too. You can use the [WCAG Color Contrast Checker][contrast_checker] to validate the contrast ratio of your color to improve accessibility. Additionally, set `themeFont` and `themeFontPath` to override the default font.
-- **Comments** - Comments are powered by [utterances][utterances], a lightweight comments widget built on GitHub issues. Update the `repo`  of the `[comments]` section of `params.toml`.
-- **Security policy** - The theme uses rather strict security policies by default. Be sure to include references to external sources in the header configuration to avoid broken links. The settings of the local development server are defined in `server.toml`. Similar settings are defined in the `netlify.toml` file provided in the repository's root when deploying to [Netlify][netlify].
+See the [official documentation][getstarted] on how to configure your site.
 
 ## Contributing
 
-1. Clone the repository and create a new branch
-
-    ```console
-    git checkout https://github.com/gethinode/hinode.git -b name_for_new_branch
-    ```
-
-2. Make and test the changes
-3. Submit a Pull Request with a comprehensive description of the changes
+See the [official documentation][contribute] on how to contribute to the open-source development of Hinode.
 
 ## Credits
 
@@ -144,7 +125,6 @@ The `hinode` and `child` codebase is released under the [MIT license][license].
 [blist]: https://github.com/apvarun/blist-hugo-theme
 [bootstrap]: https://getbootstrap.com
 [cc-by-nc-4.0]: https://creativecommons.org/licenses/by-nc/4.0/
-[contrast_checker]: https://accessibleweb.com/color-contrast-checker/
 [doks]: https://github.com/h-enk/doks
 [flexsearch]: https://github.com/nextapps-de/flexsearch
 [git_download]: https://git-scm.com
@@ -157,11 +137,10 @@ The `hinode` and `child` codebase is released under the [MIT license][license].
 [utterances]: https://utteranc.es
 
 <!-- MARKDOWN MAINTAINED LINKS -->
-<!-- TODO: add blog link
-[blog]: https://markdumay.com
-[blog]: https://github.com/markdumay
--->
+[contribute]: https://gethinode.com/contribute
+[getstarted]: https://gethinode.com/docs
 [demo]: https://demo.gethinode.com/
 [license]: https://github.com/gethinode/hinode/blob/main/LICENSE
 [repository]: https://github.com/gethinode/hinode.git
 [repository_child]: https://github.com/gethinode/child.git
+[website]: https://gethinode.com/

assets/icons/accordion-button-active-icon-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='{{ .accordion_icon_active_color_dark }}'>
+    <path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/>
+</svg>

assets/icons/accordion-button-icon-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='{{ .accordion_icon_color_dark }}'>
+    <path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/>
+</svg>

assets/icons/btn-toggle-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 320 512' fill='{{ .btn_toggle_color_dark }}'>
+    <path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/>
+</svg>

assets/icons/carousel-control-next-icon-bg.svg

@@ -1,3 +1,3 @@
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='{{ .carousel_control_color }} '>
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='{{ .carousel_control_color }}'>
     <path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/>
 </svg>

assets/icons/form-select-indicator-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+    <path fill='none' stroke='{{ .form_select_indicator_color_dark }}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/>
+</svg>

assets/icons/form-switch-bg-image-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'>
+    <circle r='3' fill='{{ .form_switch_color_dark }}' />
+</svg>

assets/js/color.js

@@ -0,0 +1,67 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2022 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+{{ if site.Params.main.enableDarkMode }}
+
+(() => {
+  'use strict'
+
+  const storedTheme = localStorage.getItem('theme')
+
+  const getPreferredTheme = () => {
+    if (storedTheme) {
+      return storedTheme
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  const setTheme = function (theme) {
+    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.setAttribute('data-bs-theme', 'dark')
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+  }
+
+  setTheme(getPreferredTheme())
+
+  const showActiveTheme = theme => {
+    const activeSelector = document.querySelector('.theme-icon-active')
+    const activeButton = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+    const activeIcon = activeButton.querySelector('i')
+
+    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+      element.classList.remove('active')
+    })
+
+    activeSelector.className = activeIcon.className
+    activeSelector.className = activeSelector.className.replace('theme-icon', 'theme-icon-active')
+    activeButton.classList.add('active')
+  }
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    if (storedTheme !== 'light' || storedTheme !== 'dark') {
+      setTheme(getPreferredTheme())
+    }
+  })
+
+  window.addEventListener('DOMContentLoaded', () => {
+    showActiveTheme(getPreferredTheme())
+
+    document.querySelectorAll('[data-bs-theme-value]')
+      .forEach(toggle => {
+        toggle.addEventListener('click', () => {
+          const theme = toggle.getAttribute('data-bs-theme-value')
+          localStorage.setItem('theme', theme)
+          setTheme(theme)
+          showActiveTheme(theme)
+        })
+      })
+  })
+})()
+
+{{ end }}

assets/scss/app.scss

@@ -1,7 +1,6 @@
 // Define template variables
 // TODO: optimize, see https://discourse.gohugo.io/t/initialize-sass-variables-from-hugo-templates/42053
 //       requires installation of dart-sass, no cross-platform installation available yet
-$themeColor:                    {{ site.Params.style.themeColor | default "#007bff" }};
 $themeFont:                     {{ site.Params.style.themeFont | default "Inter" }};
 $primary:                       {{ site.Params.style.primary | default "#007bff" }};
 $secondary:                     {{ site.Params.style.secondary | default "#6c757d" }};
@@ -12,6 +11,7 @@ $danger:                        {{ site.Params.style.danger | default "#dc3545"
 $light:                         {{ site.Params.style.light | default "#f8f9fa" }};
 $dark:                          {{ site.Params.style.dark | default "#212529" }};
 $navbar-offset:                 {{ if site.Params.navigation.fixed }}{{ site.Params.navigation.offset | default "4em" }}{{ else }}0em{{ end }};
+$enable-dark-mode:              {{ site.Params.main.enableDarkMode | default true }} !default;
 
 // Include default variable overrides
 @import "common/variables.scss";
@@ -23,13 +23,14 @@ $navbar-offset:                 {{ if site.Params.navigation.fixed }}{{ site.Par
 @import "bootstrap/scss/functions";
 
 // Import Bootstrap configuration
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/maps";
+@import "hotfix/variables";
+@import "hotfix/variables-dark.scss";
+@import "hotfix/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
 
 // Import Bootstrap layout & components
-@import "bootstrap/scss/root";
+@import "hotfix/root";
 @import "bootstrap/scss/reboot";
 @import "bootstrap/scss/type";
 @import "bootstrap/scss/images";
@@ -96,6 +97,7 @@ $navbar-offset:                 {{ if site.Params.navigation.fixed }}{{ site.Par
 @import "layouts/type.scss";
 @import "common/export.scss";
 @import "helpers/colored-links.scss";
+@import "helpers/hidden.scss";
 
 // Import theme placeholder
 @import "theme.scss";

assets/scss/common/_export.scss

@@ -3,17 +3,22 @@
 // scss-docs-start export
 :hinode-theme {
     --accordion-icon-active-color: #{$accordion-icon-active-color};
+    --accordion-icon-active-color-dark: #{$gray-300};
     --accordion-icon-color: #{$accordion-icon-color};
+    --accordion-icon-color-dark: #{$gray-600};
     --btn-close-color: #{$btn-close-color};
     --btn-toggle-color: #{$btn-toggle-color};
+    --btn-toggle-color-dark: #{$gray-600};
     --carousel-control-color: #{$carousel-control-color};
     --form-check-input-checked-color: #{$form-check-input-checked-color};
     --form-check-input-indeterminate-color: #{$form-check-input-indeterminate-color};
     --form-feedback-icon-invalid-color: #{$form-feedback-icon-invalid-color};
     --form-feedback-icon-valid-color: #{$form-feedback-icon-valid-color};
     --form-select-indicator-color: #{$form-select-indicator-color};
+    --form-select-indicator-color-dark: #{$form-select-indicator-color-dark};
     --form-switch-checked-color: #{$form-switch-checked-color};
     --form-switch-color: #{$form-switch-color};
+    --form-switch-color-dark: #{$form-switch-color-dark};
     --form-switch-focus-color: #{$form-switch-focus-color};
     --navbar-dark-color: #{$navbar-dark-color};
     --navbar-light-icon-color: rgba($body-color, 0.75); // TODO: See https://github.com/twbs/bootstrap/pull/37720

assets/scss/common/_icons.scss

@@ -3,18 +3,23 @@ $form-check-input-checked-bg-image:             url("icons/form-check-input-chec
 $form-check-radio-checked-bg-image:             url("icons/form-check-radio-checked-bg-image.svg") !default;
 $form-check-input-indeterminate-bg-image:       url("icons/form-check-input-indeterminate-bg-image.svg") !default;
 $form-switch-bg-image:                          url("icons/form-switch-bg-image.svg") !default;
+$form-switch-bg-image-dark:                     url("icons/form-switch-bg-image-dark.svg") !default;
 $form-switch-focus-bg-image:                    url("icons/form-switch-focus-bg-image.svg") !default;
 $form-switch-checked-bg-image:                  url("icons/form-switch-checked-bg-image.svg") !default;
 $form-select-indicator:                         url("icons/form-select-indicator.svg") !default;
+$form-select-indicator-dark:                    url("icons/form-select-indicator-dark.svg") !default;
 $form-feedback-icon-valid:                      url("icons/form-feedback-icon-valid.svg") !default;
 $form-feedback-icon-invalid:                    url("icons/form-feedback-icon-invalid.svg") !default;
 $navbar-light-toggler-icon-bg:                  url("icons/navbar-light-toggler-icon-bg.svg") !default;
 $navbar-dark-toggler-icon-bg:                   url("icons/navbar-dark-toggler-icon-bg.svg") !default;
 $accordion-button-icon:                         url("icons/accordion-button-icon.svg") !default;
+$accordion-button-icon-dark:                    url("icons/accordion-button-icon-dark.svg") !default;
 $accordion-button-active-icon:                  url("icons/accordion-button-active-icon.svg") !default;
+$accordion-button-active-icon-dark:             url("icons/accordion-button-active-icon-dark.svg") !default;
 $carousel-control-prev-icon-bg:                 url("icons/carousel-control-prev-icon-bg.svg") !default;
 $carousel-control-next-icon-bg:                 url("icons/carousel-control-next-icon-bg.svg") !default;
 $btn-close-bg:                                  url("icons/btn-close-bg.svg") !default;
 $btn-toggle:                                    url("icons/btn-toggle.svg") !default;
+$btn-toggle-dark:                               url("icons/btn-toggle-dark.svg") !default;
 
 // scss-docs-end icons

assets/scss/common/_variables.scss

@@ -22,4 +22,8 @@ strong {
 // scss-docs-end font
 
 $black:                       #000 !default;
-$btn-toggle-color:              $black !default;
+$btn-toggle-color:              $black !default;
+
+$carousel-dark-indicator-active-bg:  #ffffff !default;
+$carousel-dark-caption-color:        #ffffff !default;
+$carousel-dark-control-icon-filter:  invert(0) grayscale(100) !default;

assets/scss/components/_card.scss

@@ -1,3 +1,5 @@
+// stylelint-disable annotation-no-unknown
+
 // add zoom animation with opacity change on card img hover
 // source: https://stackoverflow.com/a/43816376
 
@@ -40,3 +42,30 @@
     transform: scale(1.01);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
 }
+
+.card-body-link {
+    color: $body-color if($enable-important-utilities, !important, null);
+
+    @if $link-shade-percentage != 0 {
+        &:hover,
+        &:focus {
+            color: tint-color($body-color, $link-shade-percentage) if($enable-important-utilities, !important, null);
+        }
+    }
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .card-body-link {
+            color: $gray-500 if($enable-important-utilities, !important, null);
+
+            @if $link-shade-percentage != 0 {
+                &:hover,
+                &:focus {
+                    color: shade-color($gray-500, $link-shade-percentage) if($enable-important-utilities, !important, null);
+                }
+            }
+        }
+    }
+}
+// stylelint-enable annotation-no-unknown

assets/scss/components/_navbar.scss

@@ -1,3 +1,5 @@
+// stylelint-disable annotation-no-unknown
+
 // Source: https://jsfiddle.net/njhgr40m/
 
 /* Remove border from toggler */
@@ -65,3 +67,21 @@
 .navbar-toggler.collapsed .toggler-icon {
     background-color: #777;
 }
+
+.emphasis {
+    background-color: $black if($enable-important-utilities, !important, null);
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .emphasis {
+            background-color: $white if($enable-important-utilities, !important, null);
+        }
+    }
+}
+
+.nav-spacing {
+    width: 26px;
+}
+
+// stylelint-enable annotation-no-unknown

assets/scss/components/_search.scss

@@ -11,7 +11,7 @@
 .form-control.is-search {
     padding-right: 4rem;
     border: 1px solid transparent;
-    background: $gray-100;
+    background: var(--bs-tertiary-bg);
 }
 
 .form-control.is-search:focus {
@@ -29,9 +29,9 @@
     padding-right: 0.3125rem;
     padding-left: 0.3125rem;
     font-size: $font-size-base * 0.75;
-    color: $gray-700;
+    color: var(--bs-secondary-color);
     content: "Ctrl + /";
-    border: 1px solid $gray-300;
+    border: 1px solid var(--bs-border-color);
     border-radius: 0.25rem;
 }
 
@@ -59,12 +59,12 @@
 }
 
 #suggestions a:focus {
-    background: $gray-100;
+    background-color: var(--bs-tertiary-bg);
     outline: 0;
 }
 
 #suggestions div:not(:first-child) {
-    border-top: 1px dashed $gray-200;
+    border-top: 1px dashed var(--bs-border-color);
 }
 
 #suggestions div:first-child {
@@ -76,7 +76,7 @@
 }
 
 #suggestions a:hover {
-    background: $gray-100;
+    background-color: var(--bs-tertiary-bg);
 }
 
 #suggestions span {
@@ -86,12 +86,11 @@
 
 .suggestion__title {
     font-weight: $headings-font-weight;
-    color: $black;
 }
 
 .suggestion__description,
 .suggestion__no-results {
-    color: $gray-700;
+    color: var(--bs-secondary-color);
 }
 
 @include media-breakpoint-up(sm) {
@@ -106,7 +105,7 @@
     .suggestion__title {
         width: 9rem;
         padding-right: 1rem;
-        border-right: 1px solid $gray-200;
+        border-right: 1px solid var(--bs-border-color);
         display: inline-block;
         text-align: right;
     }

assets/scss/components/_sidebar.scss

@@ -3,6 +3,10 @@
     top: $navbar-offset;
 }
 
+.sidebar-item {
+    color: black;
+}
+
 .btn-toggle {
     padding: 0.25rem 0.5rem;
     font-weight: 600;
@@ -11,7 +15,7 @@
 
     &:hover,
     &:focus {
-        color: rgba(0, 0, 0, 0.85);
+        color: black;
         background-color: tint-color($primary, 90%);
     }
 
@@ -24,10 +28,8 @@
     }
 }
 
-// scss-docs-end sidebar
-
 .btn-toggle[aria-expanded="true"] {
-    color: rgba(0, 0, 0, 0.85);
+    color: black;
 
     &::before {
         transform: rotate(90deg);
@@ -49,6 +51,50 @@
     }
 }
 
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .sidebar-item {
+            color: var(--bs-tertiary-color);
+        }
+
+        .btn-toggle {
+            color: var(--bs-tertiary-color);
+        
+            &:hover,
+            &:focus {
+                color: $secondary;
+                background-color: tint-color($primary, 90%);
+            }
+        
+            &::before {
+                content: $btn-toggle-dark;
+            }
+        }
+
+        .btn-toggle[aria-expanded="true"] {
+            color: var(--bs-secondary-color);
+        }
+
+        .btn-toggle-nav a {
+            padding: 0.1875rem 0.5rem;
+            margin-top: 0.125rem;
+            margin-left: 1.25rem;
+
+            &:hover,
+            &:focus {
+                color: $secondary;
+                background-color: tint-color($primary, 90%);
+            }
+
+            &.active {
+                font-weight: bold;
+            }
+        }
+    }
+}
+
+// scss-docs-end sidebar
+
 .dropdown-toggle {
     outline: 0;
 }

assets/scss/components/_syntax-dark.scss

@@ -0,0 +1,86 @@
+/* Background */ .bg { color: #c9d1d9; background-color: #0d1117; }
+/* PreWrapper */ .chroma { color: #c9d1d9; background-color: #0d1117; }
+/* Other */ .chroma .x {  }
+/* Error */ .chroma .err { color: #f85149 }
+/* CodeLine */ .chroma .cl {  }
+/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
+/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
+/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #64686c }
+/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 }
+/* Line */ .chroma .line { display: flex; }
+/* Keyword */ .chroma .k { color: #ff7b72 }
+/* KeywordConstant */ .chroma .kc { color: #79c0ff }
+/* KeywordDeclaration */ .chroma .kd { color: #ff7b72 }
+/* KeywordNamespace */ .chroma .kn { color: #ff7b72 }
+/* KeywordPseudo */ .chroma .kp { color: #79c0ff }
+/* KeywordReserved */ .chroma .kr { color: #ff7b72 }
+/* KeywordType */ .chroma .kt { color: #ff7b72 }
+/* Name */ .chroma .n {  }
+/* NameAttribute */ .chroma .na {  }
+/* NameBuiltin */ .chroma .nb {  }
+/* NameBuiltinPseudo */ .chroma .bp {  }
+/* NameClass */ .chroma .nc { color: #f0883e; font-weight: bold }
+/* NameConstant */ .chroma .no { color: #79c0ff; font-weight: bold }
+/* NameDecorator */ .chroma .nd { color: #d2a8ff; font-weight: bold }
+/* NameEntity */ .chroma .ni { color: #ffa657 }
+/* NameException */ .chroma .ne { color: #f0883e; font-weight: bold }
+/* NameFunction */ .chroma .nf { color: #d2a8ff; font-weight: bold }
+/* NameFunctionMagic */ .chroma .fm {  }
+/* NameLabel */ .chroma .nl { color: #79c0ff; font-weight: bold }
+/* NameNamespace */ .chroma .nn { color: #ff7b72 }
+/* NameOther */ .chroma .nx {  }
+/* NameProperty */ .chroma .py { color: #79c0ff }
+/* NameTag */ .chroma .nt { color: #7ee787 }
+/* NameVariable */ .chroma .nv { color: #79c0ff }
+/* NameVariableClass */ .chroma .vc {  }
+/* NameVariableGlobal */ .chroma .vg {  }
+/* NameVariableInstance */ .chroma .vi {  }
+/* NameVariableMagic */ .chroma .vm {  }
+/* Literal */ .chroma .l { color: #a5d6ff }
+/* LiteralDate */ .chroma .ld { color: #79c0ff }
+/* LiteralString */ .chroma .s { color: #a5d6ff }
+/* LiteralStringAffix */ .chroma .sa { color: #79c0ff }
+/* LiteralStringBacktick */ .chroma .sb { color: #a5d6ff }
+/* LiteralStringChar */ .chroma .sc { color: #a5d6ff }
+/* LiteralStringDelimiter */ .chroma .dl { color: #79c0ff }
+/* LiteralStringDoc */ .chroma .sd { color: #a5d6ff }
+/* LiteralStringDouble */ .chroma .s2 { color: #a5d6ff }
+/* LiteralStringEscape */ .chroma .se { color: #79c0ff }
+/* LiteralStringHeredoc */ .chroma .sh { color: #79c0ff }
+/* LiteralStringInterpol */ .chroma .si { color: #a5d6ff }
+/* LiteralStringOther */ .chroma .sx { color: #a5d6ff }
+/* LiteralStringRegex */ .chroma .sr { color: #79c0ff }
+/* LiteralStringSingle */ .chroma .s1 { color: #a5d6ff }
+/* LiteralStringSymbol */ .chroma .ss { color: #a5d6ff }
+/* LiteralNumber */ .chroma .m { color: #a5d6ff }
+/* LiteralNumberBin */ .chroma .mb { color: #a5d6ff }
+/* LiteralNumberFloat */ .chroma .mf { color: #a5d6ff }
+/* LiteralNumberHex */ .chroma .mh { color: #a5d6ff }
+/* LiteralNumberInteger */ .chroma .mi { color: #a5d6ff }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #a5d6ff }
+/* LiteralNumberOct */ .chroma .mo { color: #a5d6ff }
+/* Operator */ .chroma .o { color: #ff7b72; font-weight: bold }
+/* OperatorWord */ .chroma .ow { color: #ff7b72; font-weight: bold }
+/* Punctuation */ .chroma .p {  }
+/* Comment */ .chroma .c { color: #8b949e; font-style: italic }
+/* CommentHashbang */ .chroma .ch { color: #8b949e; font-style: italic }
+/* CommentMultiline */ .chroma .cm { color: #8b949e; font-style: italic }
+/* CommentSingle */ .chroma .c1 { color: #8b949e; font-style: italic }
+/* CommentSpecial */ .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic }
+/* CommentPreproc */ .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic }
+/* CommentPreprocFile */ .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic }
+/* Generic */ .chroma .g {  }
+/* GenericDeleted */ .chroma .gd { color: #ffa198; background-color: #490202 }
+/* GenericEmph */ .chroma .ge { font-style: italic }
+/* GenericError */ .chroma .gr { color: #ffa198 }
+/* GenericHeading */ .chroma .gh { color: #79c0ff; font-weight: bold }
+/* GenericInserted */ .chroma .gi { color: #56d364; background-color: #0f5323 }
+/* GenericOutput */ .chroma .go { color: #8b949e }
+/* GenericPrompt */ .chroma .gp { color: #8b949e }
+/* GenericStrong */ .chroma .gs { font-weight: bold }
+/* GenericSubheading */ .chroma .gu { color: #79c0ff }
+/* GenericTraceback */ .chroma .gt { color: #ff7b72 }
+/* GenericUnderline */ .chroma .gl { text-decoration: underline }
+/* TextWhitespace */ .chroma .w { color: #6e7681 }

assets/scss/components/_syntax-light.scss

@@ -0,0 +1,86 @@
+/* Background */ .bg { background-color: #ffffff; }
+/* PreWrapper */ .chroma { background-color: #ffffff; }
+/* Other */ .chroma .x {  }
+/* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 }
+/* CodeLine */ .chroma .cl {  }
+/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
+/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
+/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* Line */ .chroma .line { display: flex; }
+/* Keyword */ .chroma .k { color: #000000; font-weight: bold }
+/* KeywordConstant */ .chroma .kc { color: #000000; font-weight: bold }
+/* KeywordDeclaration */ .chroma .kd { color: #000000; font-weight: bold }
+/* KeywordNamespace */ .chroma .kn { color: #000000; font-weight: bold }
+/* KeywordPseudo */ .chroma .kp { color: #000000; font-weight: bold }
+/* KeywordReserved */ .chroma .kr { color: #000000; font-weight: bold }
+/* KeywordType */ .chroma .kt { color: #445588; font-weight: bold }
+/* Name */ .chroma .n {  }
+/* NameAttribute */ .chroma .na { color: #008080 }
+/* NameBuiltin */ .chroma .nb { color: #0086b3 }
+/* NameBuiltinPseudo */ .chroma .bp { color: #999999 }
+/* NameClass */ .chroma .nc { color: #445588; font-weight: bold }
+/* NameConstant */ .chroma .no { color: #008080 }
+/* NameDecorator */ .chroma .nd { color: #3c5d5d; font-weight: bold }
+/* NameEntity */ .chroma .ni { color: #800080 }
+/* NameException */ .chroma .ne { color: #990000; font-weight: bold }
+/* NameFunction */ .chroma .nf { color: #990000; font-weight: bold }
+/* NameFunctionMagic */ .chroma .fm {  }
+/* NameLabel */ .chroma .nl { color: #990000; font-weight: bold }
+/* NameNamespace */ .chroma .nn { color: #555555 }
+/* NameOther */ .chroma .nx {  }
+/* NameProperty */ .chroma .py {  }
+/* NameTag */ .chroma .nt { color: #000080 }
+/* NameVariable */ .chroma .nv { color: #008080 }
+/* NameVariableClass */ .chroma .vc { color: #008080 }
+/* NameVariableGlobal */ .chroma .vg { color: #008080 }
+/* NameVariableInstance */ .chroma .vi { color: #008080 }
+/* NameVariableMagic */ .chroma .vm {  }
+/* Literal */ .chroma .l {  }
+/* LiteralDate */ .chroma .ld {  }
+/* LiteralString */ .chroma .s { color: #dd1144 }
+/* LiteralStringAffix */ .chroma .sa { color: #dd1144 }
+/* LiteralStringBacktick */ .chroma .sb { color: #dd1144 }
+/* LiteralStringChar */ .chroma .sc { color: #dd1144 }
+/* LiteralStringDelimiter */ .chroma .dl { color: #dd1144 }
+/* LiteralStringDoc */ .chroma .sd { color: #dd1144 }
+/* LiteralStringDouble */ .chroma .s2 { color: #dd1144 }
+/* LiteralStringEscape */ .chroma .se { color: #dd1144 }
+/* LiteralStringHeredoc */ .chroma .sh { color: #dd1144 }
+/* LiteralStringInterpol */ .chroma .si { color: #dd1144 }
+/* LiteralStringOther */ .chroma .sx { color: #dd1144 }
+/* LiteralStringRegex */ .chroma .sr { color: #009926 }
+/* LiteralStringSingle */ .chroma .s1 { color: #dd1144 }
+/* LiteralStringSymbol */ .chroma .ss { color: #990073 }
+/* LiteralNumber */ .chroma .m { color: #009999 }
+/* LiteralNumberBin */ .chroma .mb { color: #009999 }
+/* LiteralNumberFloat */ .chroma .mf { color: #009999 }
+/* LiteralNumberHex */ .chroma .mh { color: #009999 }
+/* LiteralNumberInteger */ .chroma .mi { color: #009999 }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #009999 }
+/* LiteralNumberOct */ .chroma .mo { color: #009999 }
+/* Operator */ .chroma .o { color: #000000; font-weight: bold }
+/* OperatorWord */ .chroma .ow { color: #000000; font-weight: bold }
+/* Punctuation */ .chroma .p {  }
+/* Comment */ .chroma .c { color: #999988; font-style: italic }
+/* CommentHashbang */ .chroma .ch { color: #999988; font-style: italic }
+/* CommentMultiline */ .chroma .cm { color: #999988; font-style: italic }
+/* CommentSingle */ .chroma .c1 { color: #999988; font-style: italic }
+/* CommentSpecial */ .chroma .cs { color: #999999; font-weight: bold; font-style: italic }
+/* CommentPreproc */ .chroma .cp { color: #999999; font-weight: bold; font-style: italic }
+/* CommentPreprocFile */ .chroma .cpf { color: #999999; font-weight: bold; font-style: italic }
+/* Generic */ .chroma .g {  }
+/* GenericDeleted */ .chroma .gd { color: #000000; background-color: #ffdddd }
+/* GenericEmph */ .chroma .ge { color: #000000; font-style: italic }
+/* GenericError */ .chroma .gr { color: #aa0000 }
+/* GenericHeading */ .chroma .gh { color: #999999 }
+/* GenericInserted */ .chroma .gi { color: #000000; background-color: #ddffdd }
+/* GenericOutput */ .chroma .go { color: #888888 }
+/* GenericPrompt */ .chroma .gp { color: #555555 }
+/* GenericStrong */ .chroma .gs { font-weight: bold }
+/* GenericSubheading */ .chroma .gu { color: #aaaaaa }
+/* GenericTraceback */ .chroma .gt { color: #aa0000 }
+/* GenericUnderline */ .chroma .gl { text-decoration: underline }
+/* TextWhitespace */ .chroma .w { color: #bbbbbb }

assets/scss/components/_syntax.scss

@@ -1,86 +1,40 @@
-/* Background */ .bg { color: #272822; }
-/* PreWrapper */ .chroma { color: #272822 }
-/* Other */ .chroma .x {  }
-/* Error */ .chroma .err { color: #960050 }
-/* CodeLine */ .chroma .cl {  }
-/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
-/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
-/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
-/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
-/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-/* Line */ .chroma .line { display: flex; }
-/* Keyword */ .chroma .k { color: #00a8c8 }
-/* KeywordConstant */ .chroma .kc { color: #00a8c8 }
-/* KeywordDeclaration */ .chroma .kd { color: #00a8c8 }
-/* KeywordNamespace */ .chroma .kn { color: #f92672 }
-/* KeywordPseudo */ .chroma .kp { color: #00a8c8 }
-/* KeywordReserved */ .chroma .kr { color: #00a8c8 }
-/* KeywordType */ .chroma .kt { color: #00a8c8 }
-/* Name */ .chroma .n { color: #111111 }
-/* NameAttribute */ .chroma .na { color: #75af00 }
-/* NameBuiltin */ .chroma .nb { color: #111111 }
-/* NameBuiltinPseudo */ .chroma .bp { color: #111111 }
-/* NameClass */ .chroma .nc { color: #75af00 }
-/* NameConstant */ .chroma .no { color: #00a8c8 }
-/* NameDecorator */ .chroma .nd { color: #75af00 }
-/* NameEntity */ .chroma .ni { color: #111111 }
-/* NameException */ .chroma .ne { color: #75af00 }
-/* NameFunction */ .chroma .nf { color: #75af00 }
-/* NameFunctionMagic */ .chroma .fm { color: #111111 }
-/* NameLabel */ .chroma .nl { color: #111111 }
-/* NameNamespace */ .chroma .nn { color: #111111 }
-/* NameOther */ .chroma .nx { color: #75af00 }
-/* NameProperty */ .chroma .py { color: #111111 }
-/* NameTag */ .chroma .nt { color: #f92672 }
-/* NameVariable */ .chroma .nv { color: #111111 }
-/* NameVariableClass */ .chroma .vc { color: #111111 }
-/* NameVariableGlobal */ .chroma .vg { color: #111111 }
-/* NameVariableInstance */ .chroma .vi { color: #111111 }
-/* NameVariableMagic */ .chroma .vm { color: #111111 }
-/* Literal */ .chroma .l { color: #ae81ff }
-/* LiteralDate */ .chroma .ld { color: #d88200 }
-/* LiteralString */ .chroma .s { color: #d88200 }
-/* LiteralStringAffix */ .chroma .sa { color: #d88200 }
-/* LiteralStringBacktick */ .chroma .sb { color: #d88200 }
-/* LiteralStringChar */ .chroma .sc { color: #d88200 }
-/* LiteralStringDelimiter */ .chroma .dl { color: #d88200 }
-/* LiteralStringDoc */ .chroma .sd { color: #d88200 }
-/* LiteralStringDouble */ .chroma .s2 { color: #d88200 }
-/* LiteralStringEscape */ .chroma .se { color: #8045ff }
-/* LiteralStringHeredoc */ .chroma .sh { color: #d88200 }
-/* LiteralStringInterpol */ .chroma .si { color: #d88200 }
-/* LiteralStringOther */ .chroma .sx { color: #d88200 }
-/* LiteralStringRegex */ .chroma .sr { color: #d88200 }
-/* LiteralStringSingle */ .chroma .s1 { color: #d88200 }
-/* LiteralStringSymbol */ .chroma .ss { color: #d88200 }
-/* LiteralNumber */ .chroma .m { color: #ae81ff }
-/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
-/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
-/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
-/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
-/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
-/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
-/* Operator */ .chroma .o { color: #f92672 }
-/* OperatorWord */ .chroma .ow { color: #f92672 }
-/* Punctuation */ .chroma .p { color: #111111 }
-/* Comment */ .chroma .c { color: #75715e }
-/* CommentHashbang */ .chroma .ch { color: #75715e }
-/* CommentMultiline */ .chroma .cm { color: #75715e }
-/* CommentSingle */ .chroma .c1 { color: #75715e }
-/* CommentSpecial */ .chroma .cs { color: #75715e }
-/* CommentPreproc */ .chroma .cp { color: #75715e }
-/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
-/* Generic */ .chroma .g {  }
-/* GenericDeleted */ .chroma .gd {  }
-/* GenericEmph */ .chroma .ge { font-style: italic }
-/* GenericError */ .chroma .gr {  }
-/* GenericHeading */ .chroma .gh {  }
-/* GenericInserted */ .chroma .gi {  }
-/* GenericOutput */ .chroma .go {  }
-/* GenericPrompt */ .chroma .gp {  }
-/* GenericStrong */ .chroma .gs { font-weight: bold }
-/* GenericSubheading */ .chroma .gu {  }
-/* GenericTraceback */ .chroma .gt {  }
-/* GenericUnderline */ .chroma .gl {  }
-/* TextWhitespace */ .chroma .w {  }
+// stylelint-disable annotation-no-unknown
+@import "syntax-light";
+
+.bg,
+.chroma,
+.chroma .err {
+    // set to transparent background to avoid rendering issues with example shortcode
+    background-color: transparent if($enable-important-utilities, !important, null);
+}
+
+.syntax-highlight {
+    background-color: var(--bs-light) if($enable-important-utilities, !important, null);
+}
+
+.preview-background {
+    background-color: var(--bs-secondary-bg) if($enable-important-utilities, !important, null);
+}
+
+@if $enable-dark-mode {
+    [data-bs-theme="dark"] {
+        @import "syntax-dark"; // stylelint-disable-line no-invalid-position-at-import-rule
+
+        .bg,
+        .chroma,
+        .chroma .err {
+            // set to transparent background to avoid rendering issues with example shortcode
+            background-color: transparent if($enable-important-utilities, !important, null);
+        }
+
+        .syntax-highlight {
+            background-color: var(--bs-tertiary-bg) if($enable-important-utilities, !important, null);
+        }
+
+        .bg,
+        .chroma {
+            color: #c9d1d9 if($enable-important-utilities, !important, null);
+        }
+    }
+}
+// stylelint-enable annotation-no-unknown

assets/scss/helpers/_hidden.scss

@@ -0,0 +1,3 @@
+.hidden {
+    display: none;
+}

assets/scss/hotfix/_maps.scss

@@ -0,0 +1,176 @@
+// Copied from https://github.com/twbs/bootstrap/commit/15744ee1d04bcca03155c3bb37ee7e65a7b011c6
+//
+// Re-assigned maps
+//
+// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
+
+// scss-docs-start theme-colors-rgb
+$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
+// scss-docs-end theme-colors-rgb
+
+// scss-docs-start theme-text-map
+$theme-colors-text: (
+  "primary": $primary-text-emphasis,
+  "secondary": $secondary-text-emphasis,
+  "success": $success-text-emphasis,
+  "info": $info-text-emphasis,
+  "warning": $warning-text-emphasis,
+  "danger": $danger-text-emphasis,
+  "light": $light-text-emphasis,
+  "dark": $dark-text-emphasis,
+) !default;
+// scss-docs-end theme-text-map
+
+// scss-docs-start theme-bg-subtle-map
+$theme-colors-bg-subtle: (
+  "primary": $primary-bg-subtle,
+  "secondary": $secondary-bg-subtle,
+  "success": $success-bg-subtle,
+  "info": $info-bg-subtle,
+  "warning": $warning-bg-subtle,
+  "danger": $danger-bg-subtle,
+  "light": $light-bg-subtle,
+  "dark": $dark-bg-subtle,
+) !default;
+// scss-docs-end theme-bg-subtle-map
+
+// scss-docs-start theme-border-subtle-map
+$theme-colors-border-subtle: (
+  "primary": $primary-border-subtle,
+  "secondary": $secondary-border-subtle,
+  "success": $success-border-subtle,
+  "info": $info-border-subtle,
+  "warning": $warning-border-subtle,
+  "danger": $danger-border-subtle,
+  "light": $light-border-subtle,
+  "dark": $dark-border-subtle,
+) !default;
+// scss-docs-end theme-border-subtle-map
+
+$theme-colors-text-dark: null !default;
+$theme-colors-bg-subtle-dark: null !default;
+$theme-colors-border-subtle-dark: null !default;
+
+@if $enable-dark-mode {
+  // scss-docs-start theme-text-dark-map
+  $theme-colors-text-dark: (
+    "primary": $primary-text-emphasis-dark,
+    "secondary": $secondary-text-emphasis-dark,
+    "success": $success-text-emphasis-dark,
+    "info": $info-text-emphasis-dark,
+    "warning": $warning-text-emphasis-dark,
+    "danger": $danger-text-emphasis-dark,
+    "light": $light-text-emphasis-dark,
+    "dark": $dark-text-emphasis-dark,
+  ) !default;
+  // scss-docs-end theme-text-dark-map
+
+  // scss-docs-start theme-bg-subtle-dark-map
+  $theme-colors-bg-subtle-dark: (
+    "primary": $primary-bg-subtle-dark,
+    "secondary": $secondary-bg-subtle-dark,
+    "success": $success-bg-subtle-dark,
+    "info": $info-bg-subtle-dark,
+    "warning": $warning-bg-subtle-dark,
+    "danger": $danger-bg-subtle-dark,
+    "light": $light-bg-subtle-dark,
+    "dark": $dark-bg-subtle-dark,
+  ) !default;
+  // scss-docs-end theme-bg-subtle-dark-map
+
+  // scss-docs-start theme-border-subtle-dark-map
+  $theme-colors-border-subtle-dark: (
+    "primary": $primary-border-subtle-dark,
+    "secondary": $secondary-border-subtle-dark,
+    "success": $success-border-subtle-dark,
+    "info": $info-border-subtle-dark,
+    "warning": $warning-border-subtle-dark,
+    "danger": $danger-border-subtle-dark,
+    "light": $light-border-subtle-dark,
+    "dark": $dark-border-subtle-dark,
+  ) !default;
+  // scss-docs-end theme-border-subtle-dark-map
+}
+
+// Utilities maps
+//
+// Extends the default `$theme-colors` maps to help create our utilities.
+
+// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
+// scss-docs-start utilities-colors
+$utilities-colors: $theme-colors-rgb !default;
+// scss-docs-end utilities-colors
+
+// scss-docs-start utilities-text-colors
+$utilities-text: map-merge(
+  $utilities-colors,
+  (
+    "black": to-rgb($black),
+    "white": to-rgb($white),
+    "body": to-rgb($body-color)
+  )
+) !default;
+$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
+
+$utilities-text-emphasis-colors: (
+  "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
+  "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
+  "success-emphasis": var(--#{$prefix}success-text-emphasis),
+  "info-emphasis": var(--#{$prefix}info-text-emphasis),
+  "warning-emphasis": var(--#{$prefix}warning-text-emphasis),
+  "danger-emphasis": var(--#{$prefix}danger-text-emphasis),
+  "light-emphasis": var(--#{$prefix}light-text-emphasis),
+  "dark-emphasis": var(--#{$prefix}dark-text-emphasis)
+) !default;
+// scss-docs-end utilities-text-colors
+
+// scss-docs-start utilities-bg-colors
+$utilities-bg: map-merge(
+  $utilities-colors,
+  (
+    "black": to-rgb($black),
+    "white": to-rgb($white),
+    "body": to-rgb($body-bg)
+  )
+) !default;
+$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
+
+$utilities-bg-subtle: (
+  "primary-subtle": var(--#{$prefix}primary-bg-subtle),
+  "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
+  "success-subtle": var(--#{$prefix}success-bg-subtle),
+  "info-subtle": var(--#{$prefix}info-bg-subtle),
+  "warning-subtle": var(--#{$prefix}warning-bg-subtle),
+  "danger-subtle": var(--#{$prefix}danger-bg-subtle),
+  "light-subtle": var(--#{$prefix}light-bg-subtle),
+  "dark-subtle": var(--#{$prefix}dark-bg-subtle)
+) !default;
+// scss-docs-end utilities-bg-colors
+
+// scss-docs-start utilities-border-colors
+$utilities-border: map-merge(
+  $utilities-colors,
+  (
+    "black": to-rgb($black),
+    "white": to-rgb($white)
+  )
+) !default;
+$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
+
+$utilities-border-subtle: (
+  "primary-subtle": var(--#{$prefix}primary-border-subtle),
+  "secondary-subtle": var(--#{$prefix}secondary-border-subtle),
+  "success-subtle": var(--#{$prefix}success-border-subtle),
+  "info-subtle": var(--#{$prefix}info-border-subtle),
+  "warning-subtle": var(--#{$prefix}warning-border-subtle),
+  "danger-subtle": var(--#{$prefix}danger-border-subtle),
+  "light-subtle": var(--#{$prefix}light-border-subtle),
+  "dark-subtle": var(--#{$prefix}dark-border-subtle)
+) !default;
+// scss-docs-end utilities-border-colors
+
+$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
+
+$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+
+$gutters: $spacers !default;

assets/scss/hotfix/_root.scss

@@ -0,0 +1,180 @@
+// Copied from https://github.com/twbs/bootstrap/commit/15744ee1d04bcca03155c3bb37ee7e65a7b011c6
+
+:root,
+[data-bs-theme="light"] {
+  // Note: Custom variable values only support SassScript inside `#{}`.
+
+  // Colors
+  //
+  // Generate palettes for full colors, grays, and theme colors.
+
+  @each $color, $value in $colors {
+    --#{$prefix}#{$color}: #{$value};
+  }
+
+  @each $color, $value in $grays {
+    --#{$prefix}gray-#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-colors {
+    --#{$prefix}#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-rgb {
+    --#{$prefix}#{$color}-rgb: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-text {
+    --#{$prefix}#{$color}-text-emphasis: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-bg-subtle {
+    --#{$prefix}#{$color}-bg-subtle: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-border-subtle {
+    --#{$prefix}#{$color}-border-subtle: #{$value};
+  }
+
+  --#{$prefix}white-rgb: #{to-rgb($white)};
+  --#{$prefix}black-rgb: #{to-rgb($black)};
+
+  // Fonts
+
+  // Note: Use `inspect` for lists so that quoted items keep the quotes.
+  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
+  --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
+  --#{$prefix}font-monospace: #{inspect($font-family-monospace)};
+  --#{$prefix}gradient: #{$gradient};
+
+  // Root and body
+  // scss-docs-start root-body-variables
+  @if $font-size-root != null {
+    --#{$prefix}root-font-size: #{$font-size-root};
+  }
+  --#{$prefix}body-font-family: #{inspect($font-family-base)};
+  @include rfs($font-size-base, --#{$prefix}body-font-size);
+  --#{$prefix}body-font-weight: #{$font-weight-base};
+  --#{$prefix}body-line-height: #{$line-height-base};
+  @if $body-text-align != null {
+    --#{$prefix}body-text-align: #{$body-text-align};
+  }
+
+  --#{$prefix}body-color: #{$body-color};
+  --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
+  --#{$prefix}body-bg: #{$body-bg};
+  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
+
+  --#{$prefix}emphasis-color: #{$body-emphasis-color};
+  --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
+
+  --#{$prefix}secondary-color: #{$body-secondary-color};
+  --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
+  --#{$prefix}secondary-bg: #{$body-secondary-bg};
+  --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
+
+  --#{$prefix}tertiary-color: #{$body-tertiary-color};
+  --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
+  --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
+  --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
+  // scss-docs-end root-body-variables
+
+  @if $headings-color != null {
+    --#{$prefix}heading-color: #{$headings-color};
+  }
+
+  --#{$prefix}link-color: #{$link-color};
+  --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
+  --#{$prefix}link-decoration: #{$link-decoration};
+
+  --#{$prefix}link-hover-color: #{$link-hover-color};
+  --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
+
+  @if $link-hover-decoration != null {
+    --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
+  }
+
+  --#{$prefix}code-color: #{$code-color};
+  --#{$prefix}highlight-bg: #{$mark-bg};
+
+  // scss-docs-start root-border-var
+  --#{$prefix}border-width: #{$border-width};
+  --#{$prefix}border-style: #{$border-style};
+  --#{$prefix}border-color: #{$border-color};
+  --#{$prefix}border-color-translucent: #{$border-color-translucent};
+
+  --#{$prefix}border-radius: #{$border-radius};
+  --#{$prefix}border-radius-sm: #{$border-radius-sm};
+  --#{$prefix}border-radius-lg: #{$border-radius-lg};
+  --#{$prefix}border-radius-xl: #{$border-radius-xl};
+  --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
+  --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
+  --#{$prefix}border-radius-pill: #{$border-radius-pill};
+  // scss-docs-end root-border-var
+
+  --#{$prefix}box-shadow: #{$box-shadow};
+  --#{$prefix}box-shadow-sm: #{$box-shadow-sm};
+  --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
+  --#{$prefix}box-shadow-inset: #{$box-shadow-inset};
+
+  // Focus styles
+  // scss-docs-start root-focus-variables
+  --#{$prefix}focus-ring-width: #{$focus-ring-width};
+  --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
+  --#{$prefix}focus-ring-color: #{$focus-ring-color};
+  // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
+  --#{$prefix}focus-ring-box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
+  // scss-docs-end root-focus-variables
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark, true) {
+    color-scheme: dark;
+
+    // scss-docs-start root-dark-mode-vars
+    --#{$prefix}body-color: #{$body-color-dark};
+    --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
+    --#{$prefix}body-bg: #{$body-bg-dark};
+    --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
+
+    --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
+    --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
+
+    --#{$prefix}secondary-color: #{$body-secondary-color-dark};
+    --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
+    --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
+    --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
+
+    --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
+    --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+    --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
+    --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+
+    @each $color, $value in $theme-colors-text-dark {
+      --#{$prefix}#{$color}-text-emphasis: #{$value};
+    }
+
+    @each $color, $value in $theme-colors-bg-subtle-dark {
+      --#{$prefix}#{$color}-bg-subtle: #{$value};
+    }
+
+    @each $color, $value in $theme-colors-border-subtle-dark {
+      --#{$prefix}#{$color}-border-subtle: #{$value};
+    }
+
+    @if $headings-color-dark != null {
+      --#{$prefix}heading-color: #{$headings-color-dark};
+    }
+
+    --#{$prefix}link-color: #{$link-color-dark};
+    --#{$prefix}link-hover-color: #{$link-hover-color-dark};
+    --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
+    --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
+
+    --#{$prefix}code-color: #{$code-color-dark};
+
+    --#{$prefix}border-color: #{$border-color-dark};
+    --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
+    // scss-docs-end root-dark-mode-vars
+  }
+}

assets/scss/hotfix/_variables-dark.scss

@@ -0,0 +1,77 @@
+// Copied from https://github.com/twbs/bootstrap/pull/37953
+
+// Dark color mode variables
+//
+// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
+
+//
+// Global colors
+//
+
+// scss-docs-start sass-dark-mode-vars
+// scss-docs-start theme-text-dark-variables
+$primary-text-emphasis-dark:        tint-color($primary, 40%) !default;
+$secondary-text-emphasis-dark:      tint-color($secondary, 40%) !default;
+$success-text-emphasis-dark:        tint-color($success, 40%) !default;
+$info-text-emphasis-dark:           tint-color($info, 40%) !default;
+$warning-text-emphasis-dark:        tint-color($warning, 40%) !default;
+$danger-text-emphasis-dark:         tint-color($danger, 40%) !default;
+$light-text-emphasis-dark:          $gray-100 !default;
+$dark-text-emphasis-dark:           $gray-300 !default;
+// scss-docs-end theme-text-dark-variables
+
+// scss-docs-start theme-bg-subtle-dark-variables
+$primary-bg-subtle-dark:            shade-color($primary, 80%) !default;
+$secondary-bg-subtle-dark:          shade-color($secondary, 80%) !default;
+$success-bg-subtle-dark:            shade-color($success, 80%) !default;
+$info-bg-subtle-dark:               shade-color($info, 80%) !default;
+$warning-bg-subtle-dark:            shade-color($warning, 80%) !default;
+$danger-bg-subtle-dark:             shade-color($danger, 80%) !default;
+$light-bg-subtle-dark:              $gray-800 !default;
+$dark-bg-subtle-dark:               mix($gray-800, $black) !default;
+// scss-docs-end theme-bg-subtle-dark-variables
+
+// scss-docs-start theme-border-subtle-dark-variables
+$primary-border-subtle-dark:        shade-color($primary, 40%) !default;
+$secondary-border-subtle-dark:      shade-color($secondary, 40%) !default;
+$success-border-subtle-dark:        shade-color($success, 40%) !default;
+$info-border-subtle-dark:           shade-color($info, 40%) !default;
+$warning-border-subtle-dark:        shade-color($warning, 40%) !default;
+$danger-border-subtle-dark:         shade-color($danger, 40%) !default;
+$light-border-subtle-dark:          $gray-700 !default;
+$dark-border-subtle-dark:           $gray-800 !default;
+// scss-docs-end theme-border-subtle-dark-variables
+
+$body-color-dark:                   $gray-500 !default;
+$body-bg-dark:                      $gray-900 !default;
+$body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
+$body-secondary-bg-dark:            $gray-800 !default;
+$body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
+$body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%) !default;
+$body-emphasis-color-dark:          $white !default;
+$border-color-dark:                 $gray-700 !default;
+$border-color-translucent-dark:     rgba($white, .15) !default;
+$headings-color-dark:               null !default;
+$link-color-dark:                   tint-color($primary, 40%) !default;
+$link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
+$code-color-dark:                   tint-color($code-color, 40%) !default;
+
+
+//
+// Forms
+//
+
+$form-select-indicator-color-dark:  $body-color-dark !default;
+$form-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
+
+$form-switch-color-dark:            rgba($white, .25) !default;
+$form-switch-bg-image-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
+
+
+//
+// Accordion
+//
+
+$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-emphasis-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-emphasis-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+// scss-docs-end sass-dark-mode-vars

config/_default/params.toml

@@ -2,6 +2,7 @@
 [main]
     separator = "-"
     description = "Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5."
+    enableDarkMode = true
 # toml-docs-end main
 
 # toml-docs-start docs
@@ -19,8 +20,8 @@
 
 # toml-docs-start navigation
 [navigation]
-    logo = "/img/logo_embedded.svg"
-    color = "white"
+    logo = "/img/logo_icon.svg"
+    color = "body"
     style = "light"
     fixed = true
     offset = "4em"
@@ -115,78 +116,11 @@
     #theme = "" 
 
 [links]
-    azure = "https://azure.microsoft.com"
-    az_blob_domain = "https://learn.microsoft.com/en-us/azure/storage/blobs/storage-custom-domain-name"
-    az_blob_pricing = "https://azure.microsoft.com/en-us/free"
-    az_cdn_rules = "https://learn.microsoft.com/en-us/azure/cdn/cdn-standard-rules-engine-reference"
-    blist = "https://github.com/apvarun/blist-hugo-theme"
-    bootstrap = "https://getbootstrap.com"
     bs_badge_heading = "https://getbootstrap.com/docs/5.2/components/badge/#headings"
-    bs_breakpoints = "https://getbootstrap.com/docs/5.3/layout/breakpoints"
-    bs_grid = "https://getbootstrap.com/docs/5.3/layout/grid"
-    bs_offcanvas = "https://getbootstrap.com/docs/5.3/components/offcanvas"
-    bs_navbar_placement = "https://getbootstrap.com/docs/5.3/components/navbar/#placement"
-    bs_tables = "https://getbootstrap.com/docs/5.3/content/tables"
-    cc_by_nc_4_0 = "https://creativecommons.org/licenses/by-nc/4.0/"
-    commit_message = "https://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html"
-    contrast_checker = "https://accessibleweb.com/color-contrast-checker/"
-    css_codeguide = "https://codeguide.co/#css"
-    doks = "https://github.com/h-enk/doks"
-    eslint = "https://eslint.org"
-    flexsearch = "https://github.com/nextapps-de/flexsearch"
-    fontawesome = "https://fontawesome.com"
-    fa_icons = "https://fontawesome.com/icons"
-    fa_styling = "https://fontawesome.com/docs/web/style/styling"
-    fa_animation = "https://fontawesome.com/docs/web/style/animate"
-    git_download = "https://git-scm.com"
-    github_pr = "https://help.github.com/articles/about-pull-requests/"
-    github_rebase = "https://help.github.com/articles/about-git-rebase/"
-    google_fonts = "https://fonts.google.com"
-    html_codeguide = "https://codeguide.co/#html"
-    hugo = "https://gohugo.io"
-    hugo_config = "https://gohugo.io/getting-started/configuration/#all-configuration-settings"
-    hugo_config_dir = "https://gohugo.io/getting-started/configuration/#configuration-directory"
-    hugo_content = "https://gohugo.io/content-management/formats"
-    hugo_chroma = "https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages"
-    hugo_deploy = "https://gohugo.io/hosting-and-deployment/hugo-deploy"
-    hugo_deployment = "https://gohugo.io/hosting-and-deployment"
-    hugo_config_deploy = "https://gohugo.io/hosting-and-deployment/hugo-deploy/#configure-the-deployment"
-    hugo_fingerprint = "https://gohugo.io/hugo-pipes/fingerprint"
-    hugo_frontmatter = "https://gohugo.io/content-management/front-matter"
-    hugo_i18n = "https://gohugo.io/functions/i18n"
-    hugo_image = "https://gohugo.io/content-management/image-processing"
-    hugo_lang = "https://gohugo.io/content-management/multilingual"
-    hugo_lang_config = "https://gohugo.io/content-management/multilingual/#configure-languages"
-    hugo_links = "https://gohugo.io/content-management/cross-references"
-    hugo_menus = "https://gohugo.io/content-management/menus/"
-    hugo_mounts = "https://gohugo.io/hugo-modules/configuration/#module-config-mounts"
+    hinode_docs = "https://gethinode.com/docs"
     hugo_imaging = "https://gohugo.io/content-management/image-processing/#imaging-configuration"
-    hugo_ordering = "https://gohugo.io/templates/lists/#order-content"
-    hugo_templates = "https://gohugo.io/templates/introduction/"
-    hugo_toc = "https://gohugo.io/content-management/toc"
-    issue_tracker = "https://github.com/gethinode/hinode/issues"
-    license = "https://github.com/gethinode/hinode/blob/main/LICENSE"
-    markdown_emoji = "https://gist.github.com/rxaviers/7360908"
-    markdown_md013 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md013---line-length"
-    markdown_md024 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md024---multiple-headings-with-the-same-content"
-    markdown_md026 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md026---trailing-punctuation-in-heading"
-    markdown_md033 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md033---inline-html"
-    markdown_md034 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md034---bare-url-used"
-    markdown_md051 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md051---link-fragments-should-be-valid"
-    markdown_md053 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md053---link-and-image-reference-definitions-should-be-needed"
-    markdown_rules = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md"
-    markdownlint = "https://github.com/DavidAnson/markdownlint-cli2"
     mozilla_image = "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images"
-    netlify = "https://www.netlify.com"
-    nodejs = "https://nodejs.org"
-    npm = "https://www.npmjs.com"
     observatory = "https://observatory.mozilla.org/analyze/demo.gethinode.com"
-    package_npm = "https://www.npmjs.com/package/@gethinode/hinode"
     pagespeed = "https://pagespeed.web.dev/report?url=https%3A%2F%2Fdemo.gethinode.com%2F"
-    repository = "https://github.com/gethinode/hinode"
-    repository_child = "https://github.com/gethinode/child.git"
-    repository_owner = "https://github.com/gethinode/"
-    semver = "https://semver.org"
-    stylelint = "https://stylelint.io"
     utterances = "https://utteranc.es"
-    wcag_contrast = "https://www.w3.org/TR/WCAG20/#visual-audio-contrast"
+ 

config/_default/server.toml

@@ -32,6 +32,11 @@ for = '/**'
         fullscreen=(), \
         payment=() \
         """
-    Cache-Control = "public, max-age=31536000"
+    cache-control = """\
+        max-age=0, \
+        no-cache, \
+        no-store, \
+        must-revalidate \
+        """
     Access-Control-Allow-Origin = "*"
 # toml-docs-end server-config

content/en/about.md

@@ -2,11 +2,11 @@
 title: About
 description: Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5.
 date: 2022-04-11
-updated: 2023-01-14
+updated: 2023-02-11
 showComments: false
 ---
 
-<p class="text-center"><img src="/img/logo_embedded.svg" class="img-fluid w-50" alt="Logo"></p>
+<p class="text-center"><svg class="img-fluid w-50"><use href="/img/logo_var.svg#logo"></use></svg></p>
 
 <section class="section section-sm mt-5 mb-5">
     <div class="container-fluid">

content/en/blog/extra-shortcodes.md

@@ -0,0 +1,243 @@
+---
+author: Mark Dumay
+title: Extra shortcodes
+date: 2023-02-12
+description: Use shortcodes to add common Bootstrap elements with ease.
+tags: ["code"]
+thumbnail: img/paper.jpg
+photoCredits: <a href="https://www.pexels.com/@picjumbo-com-55570/">picjumbo.com</a>
+photoSource: <a href="https://www.pexels.com/photo/blue-pen-beside-black-smartphone-on-white-paper-196646/">Pexels</a>
+---
+
+Hinode provides several shortcodes that wrap common Bootstrap components. Refer to the [official documentation]({{< param "links.hinode_docs" >}}) for more details.
+
+## Accordion
+
+As an example, the following shortcode displays an accordion with three elements, of which the first element is expanded.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* accordion */>}}
+  {{</* accordion-item header="Accordion Item #1" show="true" */>}}
+    This is the first item's accordion body. It supports HTML content. The item is shown by adding the value
+    <code>show</code> to the <code>class</code> argument.
+  {{</* /accordion-item */>}}
+  {{</* accordion-item header="Accordion Item #2" */>}}
+    This is the second item's accordion body. It too supports HTML content.
+  {{</* /accordion-item */>}}
+  {{</* accordion-item header="Accordion Item #3" */>}}
+    This is the third item's accordion body.
+  {{</* /accordion-item */>}}
+{{</* /accordion */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Alert
+
+As an example, the following shortcode displays a simple alert.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* alert color="danger" dismissible="true" */>}}
+    A simple danger alert—check it out!
+{{</* /alert */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Badge
+
+Use HTML code to display a badge for a heading. See the Bootstrap [documentation]({{< param "links.bs_badge_heading" >}}) for more options. The following example displays a badge for a heading of size four.
+
+{{< example >}}
+<h1>Example heading of size one <span class="badge bg-secondary">New</span></h1>
+<h2>Example heading of size two <span class="badge bg-secondary">New</span></h2>
+<h3>Example heading of size three <span class="badge bg-secondary">New</span></h3>
+<h4>Example heading of size four <span class="badge bg-secondary">New</span></h4>
+<h5>Example heading of size five <span class="badge bg-secondary">New</span></h5>
+<h6>Example heading of size six <span class="badge bg-secondary">New</span></h6>
+{{< /example >}}
+
+## Breadcrumb
+
+As an example, the following shortcode displays a breadcrumb for the current page.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* breadcrumb path="blog" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Button
+
+As an example, the following shortcode displays a tooltip for a dark button with a badge.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* button color="secondary" tooltip="Click on the inbox to view your unread messages" href="#" badge="99+" */>}}
+    Inbox
+{{</* /button */>}}
+{{< /example>}}
+<!-- markdownlint-enable MD037 -->
+
+## Button group
+
+As an example, the following shortcode displays a group of three buttons.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* button-group aria-label="Basic example" */>}}
+  {{</* button color="primary" href="#" */>}}Left{{</* /button */>}}
+  {{</* button color="primary" href="#" */>}}Middle{{</* /button */>}}
+  {{</* button color="primary" href="#" */>}}Right{{</* /button */>}}
+{{</* /button-group */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Card
+
+As an example, the following shortcode displays a stacked card with icon that links to the [about]({{< ref "about" >}}) page. It includes a custom header and footer.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* card path="about" padding="3" class="w-50" color="light" header="publication" footer="none" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Carousel
+
+As an example, the following shortcode displays a centered carousel with three slides, 16x9 aspect ratio, and a relative width of 67% on large screens.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* carousel ratio="16x9" class="col-sm-12 col-lg-8 mx-auto" */>}}
+  {{</* img src="img/coffee.jpg" caption="slide 1" */>}}
+  {{</* img src="img/phone.jpg" caption="slide 2" */>}}
+  {{</* img src="img/dunes.jpg" caption="slide 3" */>}}
+{{</* /carousel */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Collapse
+
+As an example, the following shortcode displays a button that, when clicked, triggers a panel to appear or disappear.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* button collapse="collapse-1" */>}}
+    Trigger panel
+{{</* /button */>}}
+
+{{</* collapse id="collapse-1" class="p-3 border rounded" */>}}
+    Some placeholder content for the collapse component. This panel is <i>hidden by default</i> but
+    revealed when the user activates the relevant trigger.
+{{</* /collapse */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Command prompt
+
+Use the `command` shortcode to generate a block with a default bash command prompt.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* command */>}}
+export MY_VAR=123
+{{</* /command */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+Specify `user` and `host` to add the user context to the prompt. In addition, use `(out)` to specify an output line and use `\` to denote a line continuation.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* command user="user" host="localhost" */>}}
+export MY_VAR=123
+echo "hello"
+(out)hello
+echo one \
+two \
+three
+(out)one two three
+echo "goodbye"
+(out)goodbye
+{{</* /command */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Docs
+
+Use the `docs` shortcode to display the content of a `toml` or `scss` file:
+
+{{< docs name="theme-colors" file="config/_default/params.toml" >}}
+
+## Icon
+
+As an example, the following shortcodes show a square check, a brand logo, and a circle check.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* fa square-check */>}}
+{{</* fab linkedin */>}}
+{{</* fas circle-check */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Image
+
+As an example, the following shortcode displays an image with rounded corners and a 21x9 aspect ratio.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Navbar
+
+As an example, the following shortcode displays a light navigation header.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* navbar path="about" color="primary" size="sm" search="false" menus="sample" title="Brand" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Spinner
+
+As an example, the following shortcode displays a centered spinner.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* spinner color="info" class="text-center" */>}}
+Loading...
+{{</* /spinner */>}}
+{{< /example>}}
+<!-- markdownlint-enable MD037 -->
+
+## Toast
+
+As an example, the following shortcode displays a button that, when clicked, triggers the toast message.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* button id="toastButton" */>}}
+    Show toast
+{{</* /button */>}}
+
+{{</* toast header="Custom title" */>}}
+    This is a toast message.
+{{</* /toast */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Tooltip
+
+As an example, the following shortcode displays a tooltip for a colored hyperlink.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* tooltip color="primary" title="Tooltip" href="#" */>}}
+    Tooltip demonstration
+{{</* /tooltip */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->

i18n/de.yaml

@@ -53,6 +53,16 @@
   translation: "Erste"
 - id: paginationLast
   translation: "Letzte"
+- id: toggleSidebar
+  translation: "Menünavigation anzuzeigen oder auszublenden"
+- id: colorMode
+  translation: "Modus"
+- id: colorLight
+  translation: "Licht"
+- id: colorDark
+  translation: "Dunkel"
+- id: colorAuto
+  translation: "Automatisch"
 
 # 404 page
 - id: pageNotFound

i18n/en.yaml

@@ -53,6 +53,16 @@
   translation: "First"
 - id: paginationLast
   translation: "Last"
+- id: toggleSidebar
+  translation: "Toggle sidebar navigation"  
+- id: colorMode
+  translation: "Color mode"
+- id: colorLight
+  translation: "Light"
+- id: colorDark
+  translation: "Dark"
+- id: colorAuto
+  translation: "Auto"
 
 # 404 page
 - id: pageNotFound

i18n/nl.yaml

@@ -53,6 +53,16 @@
   translation: "Eerste"
 - id: paginationLast
   translation: "Laatste"
+- id: toggleSidebar
+  translation: "Toon of verberg navigatie"  
+- id: colorMode
+  translation: "Modus"
+- id: colorLight
+  translation: "Licht"
+- id: colorDark
+  translation: "Donker"
+- id: colorAuto
+  translation: "Automatisch"
 
 # 404 page
 - id: pageNotFound

layouts/_default/_markup/render-codeblock.html

@@ -1,4 +1,4 @@
-<div class="bg-light mb-3">
+<div class="mb-3 syntax-highlight">
     {{- $result := transform.HighlightCodeBlock . -}}
     {{- $result.Wrapped -}}
 </div>

layouts/_default/baseof.html

@@ -1,7 +1,7 @@
 {{- with partial "utilities/GetMenu" . }}{{ $.Scratch.Set "sidebar" . }}{{ end -}}
 
 <!doctype html>
-<html lang="{{ .Site.Language.Lang }}" class="no-js">
+<html lang="{{ .Site.Language.Lang }}" class="no-js" data-bs-theme="dark">
     <head>
         {{ block "head" . }}{{ end -}}
     </head>

layouts/_default/single.html

@@ -6,7 +6,7 @@
         {{ $lastmodstr := (partial "utilities/date.html" (dict "date" .Lastmod "format" "long")) -}}
         {{ $datestr := (partial "utilities/date.html" (dict "date" .Date "format" "long")) -}}
         <h1>{{ .Title }}</h1>
-        <small class="text-muted text-uppercase">
+        <small class="text-body-secondary text-uppercase">
             {{ $datestr | i18n "postedOnDate" -}}
             {{ if ne $datestr $lastmodstr -}}&nbsp;({{ $lastmodstr | i18n "lastModified" }}){{ end }} &bull;
             {{ .ReadingTime | lang.FormatNumber 0 }}&nbsp;{{ i18n "minutesShort" }} {{ i18n "read" }} &bull;
@@ -42,7 +42,7 @@
             {{ partial "utilities/git.html" . }}
         </div>
     {{ else }}
-        <div class="row row-cols-2 mt-5">
+        <div class="row row-cols-2 mt-5 mb-3">
             <div class="col">
                 {{ with .NextInSection -}}
                     {{ $next := . -}}

layouts/partials/assets/card.html

@@ -27,9 +27,9 @@
     {{- $color := .color -}}
     {{- $description := .description -}}
     
-    <a href="{{ $href }}" class="{{ if $color }}link-bg-{{ $color }}{{ else }}link-dark{{ end }}">
-        <p class="card-title fs-5 fw-bold">{{ $title }}</p>
-        {{ with $description }}<p class="card-text mb-4 {{ if $color }}link-bg-{{ $color }}{{ else }}link-dark{{ end }}">{{ . }}</p>{{ end -}}
+    <a href="{{ $href }}" class="{{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }}">
+            <p class="card-title fs-5 fw-bold">{{ $title }}</p>
+        {{ with $description }}<p class="card-text mb-4 {{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }}">{{ . }}</p>{{ end -}}
     </a>
 {{- end -}}
 
@@ -44,7 +44,7 @@
     {{- if eq $keywords "full" }}{{ $maxTags = 1 -}}
     {{- else if eq $keywords "tags" }}{{ $maxTags = 3 }}{{ end -}}
 
-    <p class="card-text"><small class="{{ if $color }}text-bg-{{ $color }}{{ else }}text-muted{{ end }} text-uppercase">
+    <p class="card-text"><small class="{{ if $color }}text-bg-{{ $color }}{{ else }}text-body-secondary{{ end }} text-uppercase">
         {{- if in (slice "full" "publication") $keywords -}}
             {{- partial "utilities/date.html" (dict "date" $page.Date "format" "long") -}}&nbsp;&bull;
             {{- $page.ReadingTime | lang.FormatNumber 0 }} {{ i18n "minutesShort" }} {{ i18n "read" -}}

layouts/partials/assets/navbar.html

@@ -59,7 +59,7 @@
 {{- $color := "" -}}
 {{- with .color -}}
     {{- $color = . -}}
-    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" -}}
+    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" -}}
     {{- if not (in $supportedColors $color) -}}
         {{- errorf "Invalid value for param 'color': %s" $color -}}
     {{- end -}}
@@ -75,6 +75,9 @@
     {{- end -}}
 {{- end -}}
 
+{{- $enableDarkMode := default true site.Params.main.enableDarkMode -}}
+{{- $enableLanguage := or $page.IsTranslated site.IsMultiLingual -}}
+
 {{- $logo := site.Params.navigation.logo -}}
 {{- with .logo }}{{ $logo = . }}{{ end -}}
 
@@ -87,13 +90,16 @@
 {{- $pre := .Pre -}}
 {{- $post := .Post -}}
 
-<nav class="navbar navbar-expand-{{ $size }} navbar-{{ $style }} {{ with $color }}bg-{{ . }}{{ end }} {{ if $fixed }}fixed-top{{ end }} p-3">
+<nav class="navbar navbar-expand-{{ $size }} {{ with $color }}bg-{{ . }}{{ end }} {{ if $fixed }}fixed-top{{ end }} p-3">
 	<div class="container-fluid">
         <!-- Insert sidebar toggler when applicable -->
         {{- if $page.Scratch.Get "sidebar" -}}
-            <button class="navbar-toggler collapsed ms-n3" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="Toggle docs navigation">
+            <button class="navbar-toggler collapsed ms-n3" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
                 {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
             </button>
+        {{- else -}}
+            <!-- Insert spacing to center logo correctly on smaller screens -->
+            <div class="nav-spacing d-{{ $size }}-none"></div>
         {{- end -}}
 
         <!-- Insert the brand logo or name -->
@@ -108,9 +114,10 @@
         <!-- Insert main navigation toggler -->
 		<button class="navbar-toggler collapsed me-n3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"
 			aria-controls="navbarSupportedContent-{{ $id }}" aria-expanded="false" aria-label="Toggle main navigation">
-			<span class="toggler-icon top-bar bg-{{ $inverseStyle }}"></span>
-			<span class="toggler-icon middle-bar bg-{{ $inverseStyle }}"></span>
-			<span class="toggler-icon bottom-bar bg-{{ $inverseStyle }}"></span>
+            <!-- TODO: add i18n translation -->
+			<span class="toggler-icon top-bar emphasis"></span>
+			<span class="toggler-icon middle-bar emphasis"></span>
+			<span class="toggler-icon bottom-bar emphasis"></span>
 		</button>
 
         <div class="navbar-collapse collapse" id="navbarSupportedContent-{{ $id }}">
@@ -128,8 +135,8 @@
                     {{- $baseurl := urls.Parse $.Site.Params.Baseurl -}}
                     {{- if .HasChildren -}}
                         <li class="nav-item dropdown">
-                            <a class="nav-link {{ if $active }}link-dark{{ end }} dropdown-toggle" href="{{ .URL }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                {{ .Name }}
+                            <a class="nav-link {{ if $active }}active{{ end }} dropdown-toggle" href="{{ .URL }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                {{ if $active }}<span  class="active">{{ .Name }}</span>{{ else }}{{ .Name }}{{ end }}
                             </a>
                             <ul class="dropdown-menu dropdown-menu-end">
                                 {{- range .Children -}}
@@ -151,12 +158,19 @@
                     {{- end -}}
                 {{- end -}}
 
+
+                {{- if or $enableLanguage $enableDarkMode -}}
+                    <li class="nav-item py-2 py-md-1 col-12 col-md-auto">
+                        <div class="vr d-none d-md-flex h-100 mx-md-2"></div>
+                    </li>
+                {{- end -}}
+
                 <!-- Insert language switcher if applicable -->
-                {{- if or $page.IsTranslated site.IsMultiLingual -}}
+                {{- if $enableLanguage -}}
                     {{- $currentLang := $page.Language.Lang -}}
                     <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                            {{- partial "assets/icon.html" (dict "icon" "fas globe") }} {{ T "languageSwitcherLabel" -}}
+                            {{- partial "assets/icon.html" (dict "icon" "fas globe") }} {{ T "languageSwitcherLabel" }}
                         </a>
                         <ul class="dropdown-menu dropdown-menu-end ">
                             {{- if $page.IsTranslated -}}
@@ -171,6 +185,36 @@
                         </ul>
                     </li>
                 {{- end -}}
+                              
+                <!-- Insert color mode switcher -->
+                {{- if $enableDarkMode -}}
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="navbar-color-theme">
+                            {{- partial "assets/icon.html" (dict "icon" "fas sun theme-icon-active") }}
+                            <span class="d-md-none"></span>
+                        </a>
+                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbar-color-theme">
+                            <li>
+                                <a class="dropdown-item" data-bs-theme-value="light">
+                                    {{- partial "assets/icon.html" (dict "icon" "fas sun theme-icon") }}
+                                    {{ T "colorLight" }}
+                                </a>
+                            </li>
+                            <li>
+                                <a class="dropdown-item" data-bs-theme-value="dark">
+                                    {{- partial "assets/icon.html" (dict "icon" "fas moon theme-icon") }}
+                                    {{ T "colorDark" }}
+                                </a>
+                            </li>
+                            <li>
+                                <a class="dropdown-item" data-bs-theme-value="auto">
+                                    {{- partial "assets/icon.html" (dict "icon" "fas circle-half-stroke theme-icon" ) }}
+                                    {{ T "colorAuto" }}
+                                </a>
+                            </li>
+                        </ul>
+                    </li>
+                {{- end -}}
             </ul>
         </div>
     </div>

layouts/partials/assets/search-input.html

@@ -1,6 +1,6 @@
-<div class="d-flex d-none d-sm-block ms-3">
+<div class="d-flex ms-md-3">
     <form class="search position-relative flex-grow-1 me-auto">
         <input id="search" class="form-control is-search" type="search" placeholder="{{ T "ui_search" }}" aria-label="{{ T "ui_search" }}" autocomplete="off">
-        <div id="suggestions" class="shadow bg-white rounded d-none"></div>
+        <div id="suggestions" class="shadow bg-body rounded d-none"></div>
     </form>
 </div>

layouts/partials/assets/sidebar.html

@@ -33,7 +33,7 @@
                                 {{- $doc_slug := $doc.title | urlize -}}
                                 {{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
                                 {{- $href := relLangURL (path.Join $section site.Params.docs.version $group_slug $doc_slug) -}}
-                                <li><a href="{{ $href }}" class="link-dark d-inline-flex text-decoration-none rounded {{ if $is_active }}active{{ end }}">{{ $doc.title }}</a></li>
+                                <li><a href="{{ $href }}" class="d-inline-flex sidebar-item text-decoration-none rounded {{ if $is_active }}active{{ end }}">{{ $doc.title }}</a></li>
                             {{- end }}
                         </ul>
                     </div>
@@ -47,7 +47,7 @@
                             {{- $doc_slug := $group.title | urlize -}}
                             {{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
                             {{- $href := relLangURL (path.Join $section site.Params.docs.version $doc_slug) -}}
-                            <a href="{{ $href }}" class="link-dark d-inline-flex text-decoration-none rounded {{ if $is_active }}active{{ end }}">
+                            <a href="{{ $href }}" class="d-inline-flex sidebar-item text-decoration-none rounded {{ if $is_active }}active{{ end }}">
                                 {{ $group.title }}
                             </a>      
                         </li>

layouts/partials/assets/toc.html

@@ -1,6 +1,6 @@
 {{ $items := len (findRE "<li.*?>(.|\n)*?</li>" .TableOfContents) -}}
 {{ if (gt $items 1) -}}
-    <div class="toc mb-5 my-md-0 ps-xl-3 mb-lg-5 p-3 text-muted sticky-top">
+    <div class="toc mb-5 my-md-0 ps-xl-3 mb-lg-5 p-3 text-body-secondary sticky-top">
         <strong class="d-block h6 my-2 pb-2 border-bottom">{{ T "toc" }}</strong>
         {{ .TableOfContents }}
     </div>

layouts/shortcodes/command.html

@@ -60,6 +60,6 @@
     {{- $output = (replace $output "<span class=\"c\">#" "<span class=\"c\">" | safeHTML) -}}
 {{- end -}}
 
-<div class="bg-light mb-3">
+<div class="mb-3 syntax-highlight">
     {{- $output -}}
 </div>

layouts/shortcodes/docs.html

@@ -70,7 +70,7 @@
         </li>
     </ul>
     <div class="border-start border-end border-bottom mb-3">
-        <div class="collapse multi-{{ $id }}{{ if $show }} show{{ end }} bg-light" id="body-{{ $id }}">
+        <div class="collapse multi-{{ $id }}{{ if $show }} show{{ end }} syntax-highlight" id="body-{{ $id }}">
             {{- highlight (trim $match "\r\n") "toml" "" -}}
         </div>
         <div class="collapse multi-{{ $id }}{{ if not $show }} show{{ end }} p-3" id="footer-{{ $id }}"><i>...</i></div>

layouts/shortcodes/example.html

@@ -27,19 +27,19 @@
 
 <div class="rounded border mb-3">
     {{- if eq $show_preview true -}}
-        <div {{ with $id }}id="{{ . }}"{{ end }} class="p-3 {{ with $class }} {{ . }}{{ end }}">
+        <div {{ with $id }}id="{{ . }}"{{ end }} class="p-3 {{ with $class }} {{ . }}{{ end }} preview-background">
             {{- $content -}}
         </div>
     {{- end -}}
-    <div class="d-flex align-items-center bg-light ps-3 pe-3 py-1 border-top border-bottom">
-        <small class="font-monospace text-muted text-uppercase">{{- $lang -}}</small>
+    <div class="d-flex align-items-center ps-3 pe-3 py-1 border-top border-bottom syntax-highlight">
+        <small class="font-monospace text-body-secondary text-uppercase">{{- $lang -}}</small>
         <!-- <div class="d-flex ms-auto">
             <button type="button" class="mt-0 me-0 border-0" title="Copy to clipboard">
                 <i class="fa-regular fa-clipboard"></i>
             </button>
         </div> -->
     </div>
-    <div class="rounded bg-light">
+    <div class="rounded-bottom syntax-highlight">
         {{- if eq $show_markup true -}}
             {{- highlight (trim $input "\r\n") $lang "" -}}
         {{- end -}}

layouts/tags/list.html

@@ -29,7 +29,7 @@
                             </div>
                             <div class="col">
                                 {{ if ne $year $lastYear }}
-                                    <p class="text-muted mt-5">{{ $year }}</p>
+                                    <p class="text-body-secondary mt-5">{{ $year }}</p>
                                     {{ $.Scratch.Set "lastYear" $year }}
                                 {{ end }}
                                 <a href="{{ .Permalink | relURL }}">{{ if .Draft }}{{ T "draft" | upper }}: {{end}}{{ .Title | markdownify }}</a>

netlify.toml

@@ -49,7 +49,12 @@
             fullscreen=(), \
             payment=() \
             """
-        Cache-Control = "public, max-age=31536000"
+        cache-control = """\
+            max-age=0, \
+            no-cache, \
+            no-store, \
+            must-revalidate \
+            """
         Access-Control-Allow-Origin = "*"
 
 [context.deploy-preview]

package-lock.json

@@ -1,22 +1,22 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.8.1",
+  "version": "0.9.0-alpha3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.8.1",
+      "version": "0.9.0-alpha3",
       "hasInstallScript": true,
       "license": "MIT",
       "devDependencies": {
-        "@fortawesome/fontawesome-free": "^6.2.1",
+        "@fortawesome/fontawesome-free": "^6.3.0",
         "@fullhuman/postcss-purgecss": "^5.0.0",
         "autoprefixer": "^10.4.13",
-        "bootstrap": "^5.2.3",
-        "eslint": "^8.31.0",
+        "bootstrap": "^5.3.0-alpha1",
+        "eslint": "^8.34.0",
         "eslint-config-standard": "^17.0.0",
-        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-import": "^2.27.5",
         "eslint-plugin-n": "^15.6.1",
         "eslint-plugin-promise": "^6.1.1",
         "exec-bin": "^1.0.0",
@@ -27,8 +27,8 @@
         "purgecss-whitelister": "^2.4.0",
         "rimraf": "^4.1.2",
         "shx": "^0.3.4",
-        "stylelint": "^14.16.1",
-        "stylelint-config-standard-scss": "^6.1.0"
+        "stylelint": "^15.1.0",
+        "stylelint-config-standard-scss": "^7.0.0"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -137,20 +137,66 @@
         "node": ">=4"
       }
     },
-    "node_modules/@csstools/selector-specificity": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz",
-      "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==",
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.0.1.tgz",
+      "integrity": "sha512-B9/8PmOtU6nBiibJg0glnNktQDZ3rZnGn/7UmDfrm2vMtrdlXO3p7ErE95N0up80IRk9YEtB5jyj/TmQ1WH3dw==",
       "dev": true,
       "engines": {
-        "node": "^12 || ^14 || >=16"
+        "node": "^14 || ^16 || >=18"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/csstools"
       },
       "peerDependencies": {
-        "postcss": "^8.2",
+        "@csstools/css-tokenizer": "^2.0.0"
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.0.1.tgz",
+      "integrity": "sha512-sYD3H7ReR88S/4+V5VbKiBEUJF4FqvG+8aNJkxqoPAnbhFziDG22IDZc4+h+xA63SfgM+h15lq5OnLeCxQ9nPA==",
+      "dev": true,
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      }
+    },
+    "node_modules/@csstools/media-query-list-parser": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.0.1.tgz",
+      "integrity": "sha512-X2/OuzEbjaxhzm97UJ+95GrMeT29d1Ib+Pu+paGLuRWZnWRK9sI9r3ikmKXPWGA1C4y4JEdBEFpp9jEqCvLeRA==",
+      "dev": true,
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^2.0.0",
+        "@csstools/css-tokenizer": "^2.0.0"
+      }
+    },
+    "node_modules/@csstools/selector-specificity": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.1.1.tgz",
+      "integrity": "sha512-jwx+WCqszn53YHOfvFMJJRd/B2GqkCBt+1MJSG6o5/s8+ytHMvDZXsJgUEWLk12UnLd7HYKac4BYU5i/Ron1Cw==",
+      "dev": true,
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4",
         "postcss-selector-parser": "^6.0.10"
       }
     },
@@ -178,9 +224,9 @@
       }
     },
     "node_modules/@fortawesome/fontawesome-free": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.2.1.tgz",
-      "integrity": "sha512-viouXhegu/TjkvYQoiRZK3aax69dGXxgEjpvZW81wIJdxm5Fnvp3VVIP4VHKqX4SvFw6qpmkILkD4RJWAdrt7A==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.3.0.tgz",
+      "integrity": "sha512-qVtd5i1Cc7cdrqnTWqTObKQHjPWAiRwjUPaXObaeNPcy7+WKxJumGBx66rfSFgK6LNpIasVKkEgW8oyf0tmPLA==",
       "dev": true,
       "hasInstallScript": true,
       "engines": {
@@ -342,9 +388,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "18.11.11",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.11.tgz",
-      "integrity": "sha512-KJ021B1nlQUBLopzZmPBVuGU9un7WJd/W4ya7Ih02B4Uwky5Nja0yGYav2EfYIk0RR2Q9oVhf60S2XR1BCWJ2g==",
+      "version": "18.13.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.13.0.tgz",
+      "integrity": "sha512-gC3TazRzGoOnoKAhUx+Q0t8S9Tzs74z7m0ipwGpSqQrleP14hKxP4/JUeEQcD3W1/aIpnWl8pHowI7WokuZpXg==",
       "dev": true
     },
     "node_modules/@types/normalize-package-data": {
@@ -353,12 +399,6 @@
       "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
       "dev": true
     },
-    "node_modules/@types/parse-json": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
-      "dev": true
-    },
     "node_modules/@types/responselike": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz",
@@ -625,9 +665,9 @@
       }
     },
     "node_modules/bootstrap": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
-      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "version": "5.3.0-alpha1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0-alpha1.tgz",
+      "integrity": "sha512-ABZpKK4ObS3kKlIqH+ZVDqoy5t/bhFG0oHTAzByUdon7YIom0lpCeTqRniDzJmbtcWkNe800VVPBiJgxSYTYew==",
       "dev": true,
       "funding": [
         {
@@ -1044,28 +1084,18 @@
       "dev": true
     },
     "node_modules/cosmiconfig": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
-      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.0.0.tgz",
+      "integrity": "sha512-da1EafcpH6b/TD8vDRaWV7xFINlHlF6zKsGwS1TsuVJTZRkquaS5HTMq7uq6h31619QjbsYl21gVDOm32KM1vQ==",
       "dev": true,
       "dependencies": {
-        "@types/parse-json": "^4.0.0",
         "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
         "parse-json": "^5.0.0",
-        "path-type": "^4.0.0",
-        "yaml": "^1.10.0"
+        "path-type": "^4.0.0"
       },
       "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/cosmiconfig/node_modules/yaml": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
+        "node": ">=14"
       }
     },
     "node_modules/cross-spawn": {
@@ -1091,6 +1121,19 @@
         "node": ">=12.22"
       }
     },
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1538,9 +1581,9 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.33.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.33.0.tgz",
-      "integrity": "sha512-WjOpFQgKK8VrCnAtl8We0SUOy/oVZ5NHykyMiagV1M9r8IFpIJX7DduK6n1mpfhlG7T1NLWm2SuD8QB7KFySaA==",
+      "version": "8.34.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.34.0.tgz",
+      "integrity": "sha512-1Z8iFsucw+7kSqXNZVslXS8Ioa4u2KM7GPwuKtkTFAqZ/cHMcEaR+1+Br0wLlot49cNxIiZk5wp8EAbPcYZxTg==",
       "dev": true,
       "dependencies": {
         "@eslint/eslintrc": "^1.4.1",
@@ -2777,9 +2820,9 @@
       ]
     },
     "node_modules/ignore": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.1.tgz",
-      "integrity": "sha512-d2qQLzTJ9WxQftPAuEQpSPmKqzxePjzVbpAVv62AQ64NTL+wR4JkrVqR/LqFsFEUsHDAiId52mJteHDFuDkElA==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
+      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
       "dev": true,
       "engines": {
         "node": ">= 4"
@@ -3492,6 +3535,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "dev": true
+    },
     "node_modules/mdurl": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
@@ -3973,9 +4022,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.19",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",
-      "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==",
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
       "dev": true,
       "funding": [
         {
@@ -4978,16 +5027,20 @@
       "dev": true
     },
     "node_modules/stylelint": {
-      "version": "14.16.1",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.16.1.tgz",
-      "integrity": "sha512-ErlzR/T3hhbV+a925/gbfc3f3Fep9/bnspMiJPorfGEmcBbXdS+oo6LrVtoUZ/w9fqD6o6k7PtUlCOsCRdjX/A==",
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.1.0.tgz",
+      "integrity": "sha512-Tw8OyIiYhxnIHUzgoLlCyWgCUKsPYiP3TDgs7M1VbayS+q5qZly2yxABg+YPe/hFRWiu0cOtptCtpyrn1CrnYw==",
       "dev": true,
       "dependencies": {
-        "@csstools/selector-specificity": "^2.0.2",
+        "@csstools/css-parser-algorithms": "^2.0.1",
+        "@csstools/css-tokenizer": "^2.0.1",
+        "@csstools/media-query-list-parser": "^2.0.1",
+        "@csstools/selector-specificity": "^2.1.1",
         "balanced-match": "^2.0.0",
         "colord": "^2.9.3",
-        "cosmiconfig": "^7.1.0",
+        "cosmiconfig": "^8.0.0",
         "css-functions-list": "^3.1.0",
+        "css-tree": "^2.3.1",
         "debug": "^4.3.4",
         "fast-glob": "^3.2.12",
         "fastest-levenshtein": "^1.0.16",
@@ -4996,7 +5049,7 @@
         "globby": "^11.1.0",
         "globjoin": "^0.1.4",
         "html-tags": "^3.2.0",
-        "ignore": "^5.2.1",
+        "ignore": "^5.2.4",
         "import-lazy": "^4.0.0",
         "imurmurhash": "^0.1.4",
         "is-plain-object": "^5.0.0",
@@ -5006,7 +5059,7 @@
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.19",
+        "postcss": "^8.4.21",
         "postcss-media-query-parser": "^0.2.3",
         "postcss-resolve-nested-selector": "^0.1.1",
         "postcss-safe-parser": "^6.0.0",
@@ -5020,13 +5073,13 @@
         "svg-tags": "^1.0.0",
         "table": "^6.8.1",
         "v8-compile-cache": "^2.3.0",
-        "write-file-atomic": "^4.0.2"
+        "write-file-atomic": "^5.0.0"
       },
       "bin": {
         "stylelint": "bin/stylelint.js"
       },
       "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+        "node": "^14.13.1 || >=16.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -5034,27 +5087,27 @@
       }
     },
     "node_modules/stylelint-config-recommended": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-9.0.0.tgz",
-      "integrity": "sha512-9YQSrJq4NvvRuTbzDsWX3rrFOzOlYBmZP+o513BJN/yfEmGSr0AxdvrWs0P/ilSpVV/wisamAHu5XSk8Rcf4CQ==",
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-10.0.1.tgz",
+      "integrity": "sha512-TQ4xQ48tW4QSlODcti7pgSRqBZcUaBzuh0jPpfiMhwJKBPkqzTIAU+IrSWL/7BgXlOM90DjB7YaNgFpx8QWhuA==",
       "dev": true,
       "peerDependencies": {
-        "stylelint": "^14.10.0"
+        "stylelint": "^15.0.0"
       }
     },
     "node_modules/stylelint-config-recommended-scss": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-8.0.0.tgz",
-      "integrity": "sha512-BxjxEzRaZoQb7Iinc3p92GS6zRdRAkIuEu2ZFLTxJK2e1AIcCb5B5MXY9KOXdGTnYFZ+KKx6R4Fv9zU6CtMYPQ==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-9.0.0.tgz",
+      "integrity": "sha512-5e9pn3Ztfncd8s9OqvvCW7tZpYe+vGmPi7VEXX7XEp+Kj38PnKCrvFCBL+hQ7rkD4d5QzjB3BxlFEyo/30UWUw==",
       "dev": true,
       "dependencies": {
         "postcss-scss": "^4.0.2",
-        "stylelint-config-recommended": "^9.0.0",
-        "stylelint-scss": "^4.0.0"
+        "stylelint-config-recommended": "^10.0.1",
+        "stylelint-scss": "^4.4.0"
       },
       "peerDependencies": {
         "postcss": "^8.3.3",
-        "stylelint": "^14.10.0"
+        "stylelint": "^15.0.0"
       },
       "peerDependenciesMeta": {
         "postcss": {
@@ -5063,29 +5116,29 @@
       }
     },
     "node_modules/stylelint-config-standard": {
-      "version": "29.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-29.0.0.tgz",
-      "integrity": "sha512-uy8tZLbfq6ZrXy4JKu3W+7lYLgRQBxYTUUB88vPgQ+ZzAxdrvcaSUW9hOMNLYBnwH+9Kkj19M2DHdZ4gKwI7tg==",
+      "version": "30.0.1",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-30.0.1.tgz",
+      "integrity": "sha512-NbeHOmpRQhjZh5XB1B/S4MLRWvz4xxAxeDBjzl0tY2xEcayNhLbaRGF0ZQzq+DQZLCcPpOHeS2Ru1ydbkhkmLg==",
       "dev": true,
       "dependencies": {
-        "stylelint-config-recommended": "^9.0.0"
+        "stylelint-config-recommended": "^10.0.1"
       },
       "peerDependencies": {
-        "stylelint": "^14.14.0"
+        "stylelint": "^15.0.0"
       }
     },
     "node_modules/stylelint-config-standard-scss": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-6.1.0.tgz",
-      "integrity": "sha512-iZ2B5kQT2G3rUzx+437cEpdcnFOQkwnwqXuY8Z0QUwIHQVE8mnYChGAquyKFUKZRZ0pRnrciARlPaR1RBtPb0Q==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-7.0.0.tgz",
+      "integrity": "sha512-rHgydRJxN4Q9lDcwrLFoiFA3S8CRqsUcyBBCLwEMjIwzJViluFfsOKFPSomx6hScVQgQ4//Fx0hRKiSHyO0ihw==",
       "dev": true,
       "dependencies": {
-        "stylelint-config-recommended-scss": "^8.0.0",
-        "stylelint-config-standard": "^29.0.0"
+        "stylelint-config-recommended-scss": "^9.0.0",
+        "stylelint-config-standard": "^30.0.1"
       },
       "peerDependencies": {
         "postcss": "^8.3.3",
-        "stylelint": "^14.14.0"
+        "stylelint": "^15.0.0"
       },
       "peerDependenciesMeta": {
         "postcss": {
@@ -5094,9 +5147,9 @@
       }
     },
     "node_modules/stylelint-scss": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.3.0.tgz",
-      "integrity": "sha512-GvSaKCA3tipzZHoz+nNO7S02ZqOsdBzMiCx9poSmLlb3tdJlGddEX/8QzCOD8O7GQan9bjsvLMsO5xiw6IhhIQ==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.4.0.tgz",
+      "integrity": "sha512-Qy66a+/30aylFhPmUArHhVsHOun1qrO93LGT15uzLuLjWS7hKDfpFm34mYo1ndR4MCo8W4bEZM1+AlJRJORaaw==",
       "dev": true,
       "dependencies": {
         "lodash": "^4.17.21",
@@ -5106,7 +5159,7 @@
         "postcss-value-parser": "^4.1.0"
       },
       "peerDependencies": {
-        "stylelint": "^14.5.1"
+        "stylelint": "^14.5.1 || ^15.0.0"
       }
     },
     "node_modules/stylelint/node_modules/balanced-match": {
@@ -5500,16 +5553,16 @@
       "dev": true
     },
     "node_modules/write-file-atomic": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.2.tgz",
-      "integrity": "sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.0.tgz",
+      "integrity": "sha512-R7NYMnHSlV42K54lwY9lvW6MnSm1HSJqZL3xiSgi9E7//FYaI74r2G0rd+/X6VAMkHEdzxQaU5HUOXWUz5kA/w==",
       "dev": true,
       "dependencies": {
         "imurmurhash": "^0.1.4",
         "signal-exit": "^3.0.7"
       },
       "engines": {
-        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
     "node_modules/xtend": {
@@ -5689,10 +5742,30 @@
         }
       }
     },
+    "@csstools/css-parser-algorithms": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.0.1.tgz",
+      "integrity": "sha512-B9/8PmOtU6nBiibJg0glnNktQDZ3rZnGn/7UmDfrm2vMtrdlXO3p7ErE95N0up80IRk9YEtB5jyj/TmQ1WH3dw==",
+      "dev": true,
+      "requires": {}
+    },
+    "@csstools/css-tokenizer": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.0.1.tgz",
+      "integrity": "sha512-sYD3H7ReR88S/4+V5VbKiBEUJF4FqvG+8aNJkxqoPAnbhFziDG22IDZc4+h+xA63SfgM+h15lq5OnLeCxQ9nPA==",
+      "dev": true
+    },
+    "@csstools/media-query-list-parser": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.0.1.tgz",
+      "integrity": "sha512-X2/OuzEbjaxhzm97UJ+95GrMeT29d1Ib+Pu+paGLuRWZnWRK9sI9r3ikmKXPWGA1C4y4JEdBEFpp9jEqCvLeRA==",
+      "dev": true,
+      "requires": {}
+    },
     "@csstools/selector-specificity": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz",
-      "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.1.1.tgz",
+      "integrity": "sha512-jwx+WCqszn53YHOfvFMJJRd/B2GqkCBt+1MJSG6o5/s8+ytHMvDZXsJgUEWLk12UnLd7HYKac4BYU5i/Ron1Cw==",
       "dev": true,
       "requires": {}
     },
@@ -5714,9 +5787,9 @@
       }
     },
     "@fortawesome/fontawesome-free": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.2.1.tgz",
-      "integrity": "sha512-viouXhegu/TjkvYQoiRZK3aax69dGXxgEjpvZW81wIJdxm5Fnvp3VVIP4VHKqX4SvFw6qpmkILkD4RJWAdrt7A==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.3.0.tgz",
+      "integrity": "sha512-qVtd5i1Cc7cdrqnTWqTObKQHjPWAiRwjUPaXObaeNPcy7+WKxJumGBx66rfSFgK6LNpIasVKkEgW8oyf0tmPLA==",
       "dev": true
     },
     "@fullhuman/postcss-purgecss": {
@@ -5839,9 +5912,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "18.11.11",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.11.tgz",
-      "integrity": "sha512-KJ021B1nlQUBLopzZmPBVuGU9un7WJd/W4ya7Ih02B4Uwky5Nja0yGYav2EfYIk0RR2Q9oVhf60S2XR1BCWJ2g==",
+      "version": "18.13.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.13.0.tgz",
+      "integrity": "sha512-gC3TazRzGoOnoKAhUx+Q0t8S9Tzs74z7m0ipwGpSqQrleP14hKxP4/JUeEQcD3W1/aIpnWl8pHowI7WokuZpXg==",
       "dev": true
     },
     "@types/normalize-package-data": {
@@ -5850,12 +5923,6 @@
       "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
       "dev": true
     },
-    "@types/parse-json": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
-      "dev": true
-    },
     "@types/responselike": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz",
@@ -6029,9 +6096,9 @@
       }
     },
     "bootstrap": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
-      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "version": "5.3.0-alpha1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0-alpha1.tgz",
+      "integrity": "sha512-ABZpKK4ObS3kKlIqH+ZVDqoy5t/bhFG0oHTAzByUdon7YIom0lpCeTqRniDzJmbtcWkNe800VVPBiJgxSYTYew==",
       "dev": true,
       "requires": {}
     },
@@ -6321,24 +6388,15 @@
       "dev": true
     },
     "cosmiconfig": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
-      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.0.0.tgz",
+      "integrity": "sha512-da1EafcpH6b/TD8vDRaWV7xFINlHlF6zKsGwS1TsuVJTZRkquaS5HTMq7uq6h31619QjbsYl21gVDOm32KM1vQ==",
       "dev": true,
       "requires": {
-        "@types/parse-json": "^4.0.0",
         "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
         "parse-json": "^5.0.0",
-        "path-type": "^4.0.0",
-        "yaml": "^1.10.0"
-      },
-      "dependencies": {
-        "yaml": {
-          "version": "1.10.2",
-          "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-          "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-          "dev": true
-        }
+        "path-type": "^4.0.0"
       }
     },
     "cross-spawn": {
@@ -6358,6 +6416,16 @@
       "integrity": "sha512-/9lCvYZaUbBGvYUgYGFJ4dcYiyqdhSjG7IPVluoV8A1ILjkF7ilmhp1OGUz8n+nmBcu0RNrQAzgD8B6FJbrt2w==",
       "dev": true
     },
+    "css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "dev": true,
+      "requires": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      }
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -6687,9 +6755,9 @@
       "dev": true
     },
     "eslint": {
-      "version": "8.33.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.33.0.tgz",
-      "integrity": "sha512-WjOpFQgKK8VrCnAtl8We0SUOy/oVZ5NHykyMiagV1M9r8IFpIJX7DduK6n1mpfhlG7T1NLWm2SuD8QB7KFySaA==",
+      "version": "8.34.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.34.0.tgz",
+      "integrity": "sha512-1Z8iFsucw+7kSqXNZVslXS8Ioa4u2KM7GPwuKtkTFAqZ/cHMcEaR+1+Br0wLlot49cNxIiZk5wp8EAbPcYZxTg==",
       "dev": true,
       "requires": {
         "@eslint/eslintrc": "^1.4.1",
@@ -7597,9 +7665,9 @@
       "dev": true
     },
     "ignore": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.1.tgz",
-      "integrity": "sha512-d2qQLzTJ9WxQftPAuEQpSPmKqzxePjzVbpAVv62AQ64NTL+wR4JkrVqR/LqFsFEUsHDAiId52mJteHDFuDkElA==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
+      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
       "dev": true
     },
     "import-fresh": {
@@ -8119,6 +8187,12 @@
       "integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==",
       "dev": true
     },
+    "mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "dev": true
+    },
     "mdurl": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
@@ -8461,9 +8535,9 @@
       }
     },
     "postcss": {
-      "version": "8.4.19",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",
-      "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==",
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
       "dev": true,
       "requires": {
         "nanoid": "^3.3.4",
@@ -9165,16 +9239,20 @@
       "dev": true
     },
     "stylelint": {
-      "version": "14.16.1",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.16.1.tgz",
-      "integrity": "sha512-ErlzR/T3hhbV+a925/gbfc3f3Fep9/bnspMiJPorfGEmcBbXdS+oo6LrVtoUZ/w9fqD6o6k7PtUlCOsCRdjX/A==",
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.1.0.tgz",
+      "integrity": "sha512-Tw8OyIiYhxnIHUzgoLlCyWgCUKsPYiP3TDgs7M1VbayS+q5qZly2yxABg+YPe/hFRWiu0cOtptCtpyrn1CrnYw==",
       "dev": true,
       "requires": {
-        "@csstools/selector-specificity": "^2.0.2",
+        "@csstools/css-parser-algorithms": "^2.0.1",
+        "@csstools/css-tokenizer": "^2.0.1",
+        "@csstools/media-query-list-parser": "^2.0.1",
+        "@csstools/selector-specificity": "^2.1.1",
         "balanced-match": "^2.0.0",
         "colord": "^2.9.3",
-        "cosmiconfig": "^7.1.0",
+        "cosmiconfig": "^8.0.0",
         "css-functions-list": "^3.1.0",
+        "css-tree": "^2.3.1",
         "debug": "^4.3.4",
         "fast-glob": "^3.2.12",
         "fastest-levenshtein": "^1.0.16",
@@ -9183,7 +9261,7 @@
         "globby": "^11.1.0",
         "globjoin": "^0.1.4",
         "html-tags": "^3.2.0",
-        "ignore": "^5.2.1",
+        "ignore": "^5.2.4",
         "import-lazy": "^4.0.0",
         "imurmurhash": "^0.1.4",
         "is-plain-object": "^5.0.0",
@@ -9193,7 +9271,7 @@
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.19",
+        "postcss": "^8.4.21",
         "postcss-media-query-parser": "^0.2.3",
         "postcss-resolve-nested-selector": "^0.1.1",
         "postcss-safe-parser": "^6.0.0",
@@ -9207,7 +9285,7 @@
         "svg-tags": "^1.0.0",
         "table": "^6.8.1",
         "v8-compile-cache": "^2.3.0",
-        "write-file-atomic": "^4.0.2"
+        "write-file-atomic": "^5.0.0"
       },
       "dependencies": {
         "balanced-match": {
@@ -9245,46 +9323,46 @@
       }
     },
     "stylelint-config-recommended": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-9.0.0.tgz",
-      "integrity": "sha512-9YQSrJq4NvvRuTbzDsWX3rrFOzOlYBmZP+o513BJN/yfEmGSr0AxdvrWs0P/ilSpVV/wisamAHu5XSk8Rcf4CQ==",
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-10.0.1.tgz",
+      "integrity": "sha512-TQ4xQ48tW4QSlODcti7pgSRqBZcUaBzuh0jPpfiMhwJKBPkqzTIAU+IrSWL/7BgXlOM90DjB7YaNgFpx8QWhuA==",
       "dev": true,
       "requires": {}
     },
     "stylelint-config-recommended-scss": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-8.0.0.tgz",
-      "integrity": "sha512-BxjxEzRaZoQb7Iinc3p92GS6zRdRAkIuEu2ZFLTxJK2e1AIcCb5B5MXY9KOXdGTnYFZ+KKx6R4Fv9zU6CtMYPQ==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-9.0.0.tgz",
+      "integrity": "sha512-5e9pn3Ztfncd8s9OqvvCW7tZpYe+vGmPi7VEXX7XEp+Kj38PnKCrvFCBL+hQ7rkD4d5QzjB3BxlFEyo/30UWUw==",
       "dev": true,
       "requires": {
         "postcss-scss": "^4.0.2",
-        "stylelint-config-recommended": "^9.0.0",
-        "stylelint-scss": "^4.0.0"
+        "stylelint-config-recommended": "^10.0.1",
+        "stylelint-scss": "^4.4.0"
       }
     },
     "stylelint-config-standard": {
-      "version": "29.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-29.0.0.tgz",
-      "integrity": "sha512-uy8tZLbfq6ZrXy4JKu3W+7lYLgRQBxYTUUB88vPgQ+ZzAxdrvcaSUW9hOMNLYBnwH+9Kkj19M2DHdZ4gKwI7tg==",
+      "version": "30.0.1",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-30.0.1.tgz",
+      "integrity": "sha512-NbeHOmpRQhjZh5XB1B/S4MLRWvz4xxAxeDBjzl0tY2xEcayNhLbaRGF0ZQzq+DQZLCcPpOHeS2Ru1ydbkhkmLg==",
       "dev": true,
       "requires": {
-        "stylelint-config-recommended": "^9.0.0"
+        "stylelint-config-recommended": "^10.0.1"
       }
     },
     "stylelint-config-standard-scss": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-6.1.0.tgz",
-      "integrity": "sha512-iZ2B5kQT2G3rUzx+437cEpdcnFOQkwnwqXuY8Z0QUwIHQVE8mnYChGAquyKFUKZRZ0pRnrciARlPaR1RBtPb0Q==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-7.0.0.tgz",
+      "integrity": "sha512-rHgydRJxN4Q9lDcwrLFoiFA3S8CRqsUcyBBCLwEMjIwzJViluFfsOKFPSomx6hScVQgQ4//Fx0hRKiSHyO0ihw==",
       "dev": true,
       "requires": {
-        "stylelint-config-recommended-scss": "^8.0.0",
-        "stylelint-config-standard": "^29.0.0"
+        "stylelint-config-recommended-scss": "^9.0.0",
+        "stylelint-config-standard": "^30.0.1"
       }
     },
     "stylelint-scss": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.3.0.tgz",
-      "integrity": "sha512-GvSaKCA3tipzZHoz+nNO7S02ZqOsdBzMiCx9poSmLlb3tdJlGddEX/8QzCOD8O7GQan9bjsvLMsO5xiw6IhhIQ==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.4.0.tgz",
+      "integrity": "sha512-Qy66a+/30aylFhPmUArHhVsHOun1qrO93LGT15uzLuLjWS7hKDfpFm34mYo1ndR4MCo8W4bEZM1+AlJRJORaaw==",
       "dev": true,
       "requires": {
         "lodash": "^4.17.21",
@@ -9566,9 +9644,9 @@
       "dev": true
     },
     "write-file-atomic": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.2.tgz",
-      "integrity": "sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.0.tgz",
+      "integrity": "sha512-R7NYMnHSlV42K54lwY9lvW6MnSm1HSJqZL3xiSgi9E7//FYaI74r2G0rd+/X6VAMkHEdzxQaU5HUOXWUz5kA/w==",
       "dev": true,
       "requires": {
         "imurmurhash": "^0.1.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.8.5",
+  "version": "0.9.0-alpha3",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -35,7 +35,9 @@
     "precheck": "npm version",
     "check": "exec-bin node_modules/.bin/hugo/hugo version",
     "copy:fonts": "shx cp ./node_modules/@fortawesome/fontawesome-free/webfonts/* ./static/fonts/",
-    "create:syntax": "exec-bin node_modules/.bin/hugo/hugo gen chromastyles --style=monokailight > ./assets/scss/components/_syntax.scss",
+    "create:syntax-light": "exec-bin node_modules/.bin/hugo/hugo gen chromastyles --style=github > ./assets/scss/components/_syntax-light.scss",
+    "create:syntax-dark": "exec-bin node_modules/.bin/hugo/hugo gen chromastyles --style=github-dark > ./assets/scss/components/_syntax-dark.scss",
+    "create:syntax": "npm run -s create:syntax-light & npm run -s create:syntax-dark",
     "postinstall": "hugo-installer --version otherDependencies.hugo --extended --destination node_modules/.bin/hugo",
     "upgrade": "npx npm-check-updates -u"
   },
@@ -50,13 +52,13 @@
   },
   "homepage": "https://gethinode.com",
   "devDependencies": {
-    "@fortawesome/fontawesome-free": "^6.2.1",
+    "@fortawesome/fontawesome-free": "^6.3.0",
     "@fullhuman/postcss-purgecss": "^5.0.0",
     "autoprefixer": "^10.4.13",
-    "bootstrap": "^5.2.3",
-    "eslint": "^8.31.0",
+    "bootstrap": "^5.3.0-alpha1",
+    "eslint": "^8.34.0",
     "eslint-config-standard": "^17.0.0",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-n": "^15.6.1",
     "eslint-plugin-promise": "^6.1.1",
     "exec-bin": "^1.0.0",
@@ -67,10 +69,10 @@
     "purgecss-whitelister": "^2.4.0",
     "rimraf": "^4.1.2",
     "shx": "^0.3.4",
-    "stylelint": "^14.16.1",
-    "stylelint-config-standard-scss": "^6.1.0"
+    "stylelint": "^15.1.0",
+    "stylelint-config-standard-scss": "^7.0.0"
   },
   "otherDependencies": {
     "hugo": "0.110.0"
   }
-}
+}

static/img/logo_icon.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="288mm" height="288mm" version="1.1" viewBox="0 0 288 288" xmlns="http://www.w3.org/2000/svg">
+<defs>
+<clipPath id="a">
+<rect y="687" width="1095" height="1100"/>
+</clipPath>
+</defs>
+<g transform="matrix(.26398 0 0 .26398 0 -1.317)">
+<g transform="translate(0,-687)" clip-path="url(#a)" fill-rule="evenodd">
+<path d="m0 933.5c0-133.38 108.12-241.5 241.5-241.5h607.99c133.38 0 241.5 108.12 241.5 241.5v608c0 133.37-108.12 241.5-241.5 241.5h-607.99c-133.38 0-241.5-108.13-241.5-241.5z" fill="#d43900"/>
+<path d="m954.7 1354.9c0 16.01-13.078 29-29.25 29h-58.5c-16.172 0-29.25-12.99-29.25-29s13.078-29 29.25-29h58.5c16.172 0 29.25 12.99 29.25 29z" fill="#fff"/>
+<path d="m252.7 1354.9c0 16.01-13.078 29-29.25 29h-58.5c-16.172 0-29.25-12.99-29.25-29s13.078-29 29.25-29h58.5c16.172 0 29.25 12.99 29.25 29z" fill="#fff"/>
+<path d="m256.14 1107.1c-11.261-11.51-11.261-30.12 0-41.63 11.274-11.51 29.481-11.51 40.755 0l34.354 35.1c11.261 11.51 11.261 30.12 0 41.63-11.274 11.52-29.481 11.52-40.755 0z" fill="#fff"/>
+<path d="m758.23 1142.2c-11.379-11.51-11.379-30.12 0-41.63l34.732-35.1c11.379-11.51 29.797-11.51 41.19 0 11.392 11.51 11.392 30.12 0 41.63l-34.732 35.1c-11.379 11.52-29.798 11.52-41.19 0z" fill="#fff"/>
+<path d="m719.36 1379.5c15.301-105.6-67.029-200.26-173.67-200.26-106.72 0-188.96 94.78-173.67 200.26 2.287 15.94-8.828 30.75-24.831 33.02-16.055 2.19-30.797-8.81-33.098-24.75-20.241-141.79 90.247-266.92 231.6-266.92 141.47 0 251.81 125.28 231.61 266.94-2.314 15.92-17.082 27.04-33.112 24.76-15.99-2.3-27.105-17.11-24.83-33.05z" fill="#fff"/>
+<path d="m837.7 1500.4c0 16.28-13.078 29.5-29.25 29.5h-526.5c-16.172 0-29.25-13.22-29.25-29.5 0-16.29 13.078-29.5 29.25-29.5h526.5c16.172 0 29.25 13.21 29.25 29.5z" fill="#fff"/>
+<path d="m544.7 1061.9c-16.008 0-29-13.08-29-29.25v-58.502c0-16.176 12.992-29.25 29-29.25 16.009 0 29 13.074 29 29.25v58.502c0 16.17-12.991 29.25-29 29.25z" fill="#fff"/>
+</g>
+</g>
+</svg>

static/img/logo_var.svg

@@ -0,0 +1,31 @@
+<svg width="1059mm" height="288.66mm" version="1.1" viewBox="0 0 1059 288.66" xmlns="http://www.w3.org/2000/svg" class="hidden">
+<symbol id="logo" viewBox="0 0 1059 288.66">
+<defs>
+<clipPath id="a">
+<rect y="687" width="1095" height="1100"/>
+</clipPath>
+</defs>
+<g transform="translate(333.63 175.02)">
+<g stroke-width=".26458" aria-label="Hinode" fill="var(--bs-emphasis-color)">
+<path d="m9.3627 49.552v-153.94h32.547v63.516h66.072v-63.516h32.472v153.94h-32.472v-63.591h-66.072v63.591z"/>
+<path d="m166.69 49.552v-115.46h32.021v115.46zm16.086-130.34q-7.1409 0-12.252-4.7355-5.0362-4.8107-5.0362-11.501 0-6.6147 5.0362-11.35 5.1114-4.8107 12.252-4.8107 7.1408 0 12.177 4.8107 5.1114 4.7355 5.1114 11.35 0 6.6899-5.1114 11.501-5.0362 4.7355-12.177 4.7355z"/>
+<path d="m256.29-17.196v66.748h-32.021v-115.46h30.518v20.37h1.353q3.8335-10.072 12.854-15.935 9.02-5.9382 21.874-5.9382 12.027 0 20.972 5.2617t13.906 15.033q4.961 9.6965 4.961 23.151v73.513h-32.021v-67.801q0.0752-10.599-5.412-16.537-5.4872-6.0134-15.109-6.0134-6.4644 0-11.425 2.7812-4.8858 2.7812-7.667 8.118-2.706 5.2617-2.7812 12.703z"/>
+<path d="m408.05 51.807q-17.514 0-30.292-7.4415-12.703-7.5167-19.619-20.896-6.9154-13.455-6.9154-31.194 0-17.89 6.9154-31.269 6.9154-13.455 19.619-20.896 12.778-7.5167 30.292-7.5167t30.217 7.5167q12.778 7.4415 19.694 20.896 6.9154 13.38 6.9154 31.269 0 17.739-6.9154 31.194-6.9154 13.38-19.694 20.896-12.703 7.4415-30.217 7.4415zm0.15034-24.805q7.9677 0 13.305-4.51 5.3368-4.5852 8.0429-12.478 2.7812-7.8925 2.7812-17.965 0-10.072-2.7812-17.965-2.706-7.8925-8.0429-12.478t-13.305-4.5852q-8.0429 0-13.53 4.5852-5.412 4.5852-8.1932 12.478-2.706 7.8925-2.706 17.965 0 10.072 2.706 17.965 2.7812 7.8925 8.1932 12.478 5.4872 4.51 13.53 4.51z"/>
+<path d="m528.31 51.431q-13.154 0-23.828-6.765-10.599-6.8402-16.837-20.07-6.1637-13.305-6.1637-32.622 0-19.844 6.3892-32.998 6.3892-13.229 16.988-19.769 10.674-6.6147 23.377-6.6147 9.6965 0 16.161 3.3073 6.5395 3.2322 10.523 8.118 4.059 4.8107 6.1637 9.471h0.97717v-57.879h31.946v153.94h-31.57v-18.491h-1.353q-2.255 4.8107-6.3892 9.5462-4.059 4.6603-10.599 7.7422-6.4644 3.0818-15.785 3.0818zm10.148-25.482q7.7422 0 13.079-4.2093 5.412-4.2845 8.2684-11.952 2.9315-7.667 2.9315-17.965 0-10.298-2.8563-17.89-2.8564-7.5919-8.2684-11.726-5.412-4.1342-13.154-4.1342-7.8925 0-13.305 4.2845-5.412 4.2845-8.1932 11.876-2.7812 7.5919-2.7812 17.589 0 10.072 2.7812 17.815 2.8564 7.667 8.1932 12.027 5.412 4.2845 13.305 4.2845z"/>
+<path d="m672.86 51.807q-17.815 0-30.668-7.216-12.778-7.2912-19.694-20.596-6.9154-13.38-6.9154-31.645 0-17.815 6.9154-31.269 6.9154-13.455 19.468-20.972 12.628-7.5167 29.616-7.5167 11.425 0 21.272 3.6832 9.922 3.608 17.288 10.899 7.4415 7.2912 11.576 18.341 4.1342 10.974 4.1342 25.707v8.7945h-97.491v-19.844h67.35q0-6.9154-3.0067-12.252-3.0067-5.3368-8.3435-8.3435-5.2617-3.0818-12.252-3.0818-7.2912 0-12.929 3.3825-5.5624 3.3073-8.7194 8.9449-3.157 5.5624-3.2322 12.403v18.867q0 8.569 3.157 14.808 3.2322 6.2389 9.0952 9.6214 5.863 3.3825 13.906 3.3825 5.3368 0 9.7717-1.5033 4.4348-1.5033 7.5918-4.51 3.157-3.0067 4.8107-7.3664l29.616 1.9543q-2.255 10.674-9.2455 18.641-6.9154 7.8925-17.89 12.327-10.899 4.3597-25.181 4.3597z"/>
+</g>
+<g transform="matrix(.26458 0 0 .26458 -333.63 -176.34)">
+<g transform="translate(0,-687)" clip-path="url(#a)" fill-rule="evenodd">
+<path d="m0 933.5c0-133.38 108.12-241.5 241.5-241.5h607.99c133.38 0 241.5 108.12 241.5 241.5v608c0 133.37-108.12 241.5-241.5 241.5h-607.99c-133.38 0-241.5-108.13-241.5-241.5z" fill="#D43900"/>
+<path d="m954.7 1354.9c0 16.01-13.078 29-29.25 29h-58.5c-16.172 0-29.25-12.99-29.25-29s13.078-29 29.25-29h58.5c16.172 0 29.25 12.99 29.25 29z" fill="#fff"/>
+<path d="m252.7 1354.9c0 16.01-13.078 29-29.25 29h-58.5c-16.172 0-29.25-12.99-29.25-29s13.078-29 29.25-29h58.5c16.172 0 29.25 12.99 29.25 29z" fill="#fff"/>
+<path d="m256.14 1107.1c-11.261-11.51-11.261-30.12 0-41.63 11.274-11.51 29.481-11.51 40.755 0l34.354 35.1c11.261 11.51 11.261 30.12 0 41.63-11.274 11.52-29.481 11.52-40.755 0z" fill="#fff"/>
+<path d="m758.23 1142.2c-11.379-11.51-11.379-30.12 0-41.63l34.732-35.1c11.379-11.51 29.797-11.51 41.19 0 11.392 11.51 11.392 30.12 0 41.63l-34.732 35.1c-11.379 11.52-29.798 11.52-41.19 0z" fill="#fff"/>
+<path d="m719.36 1379.5c15.301-105.6-67.029-200.26-173.67-200.26-106.72 0-188.96 94.78-173.67 200.26 2.287 15.94-8.828 30.75-24.831 33.02-16.055 2.19-30.797-8.81-33.098-24.75-20.241-141.79 90.247-266.92 231.6-266.92 141.47 0 251.81 125.28 231.61 266.94-2.314 15.92-17.082 27.04-33.112 24.76-15.99-2.3-27.105-17.11-24.83-33.05z" fill="#fff"/>
+<path d="m837.7 1500.4c0 16.28-13.078 29.5-29.25 29.5h-526.5c-16.172 0-29.25-13.22-29.25-29.5 0-16.29 13.078-29.5 29.25-29.5h526.5c16.172 0 29.25 13.21 29.25 29.5z" fill="#fff"/>
+<path d="m544.7 1061.9c-16.008 0-29-13.08-29-29.25v-58.502c0-16.176 12.992-29.25 29-29.25 16.009 0 29 13.074 29 29.25v58.502c0 16.17-12.991 29.25-29 29.25z" fill="#fff"/>
+</g>
+</g>
+</g>
+</symbol>
+</svg>