Merge pull request #150 from gethinode/color

Color mode

.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,16 @@ 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
+- Switching between light mode and dark mode
+- 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 +73,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 +126,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 +138,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/js/navbar.js

@@ -0,0 +1,16 @@
+const navbar = document.querySelector('.navbar')
+const toggler = document.getElementById('main-nav-toggler')
+
+// set the navbar background color to opaque when scrolling past a breakpoint
+window.onscroll = () => {
+  if (window.scrollY > 75) {
+    navbar.classList.add('nav-active')
+  } else {
+    navbar.classList.remove('nav-active')
+  }
+}
+
+// set the navbar background color to opaque when expanded
+toggler.onclick = () => {
+  navbar.classList.toggle('navbar-expanded')
+}

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,5 +1,16 @@
+// stylelint-disable annotation-no-unknown
+
 // Source: https://jsfiddle.net/njhgr40m/
 
+.navbar {
+    transition: 0.5s ease-in-out;
+    background-color: none;
+}
+
+.nav-active, .navbar-expanded {
+    background-color: var(--bs-body-bg);
+}
+
 /* Remove border from toggler */
 .navbar-toggler {
     border: 0 !important;
@@ -65,3 +76,17 @@
 .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);
+        }
+    }
+}
+
+// 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/menus/menus.nl.toml

@@ -46,4 +46,28 @@
   name = "Medium"
   pre = "<i class=\"fab fa-medium fa-2x\"></i>"
   url = "https://medium.com/"
-  weight = 30
+  weight = 30
+
+# toml-docs-start sample-navigation
+[[sample]]
+  name = "Blog"
+  url = "/blog/"
+  weight = 10
+
+[[sample]]
+  name = "Projecten"
+  url = "/projecten/"
+  weight = 20
+
+[[sample]]
+  name = "Voorbeeldproject"
+  url = "/nl/projecten/voorbeeldproject/"
+  parent = "Projecten"
+  weight = 1
+
+[[sample]]
+  name = "Ander project"
+  url = "/nl/projecten/ander-project/"
+  parent = "Projecten"
+  weight = 2
+# toml-docs-end sample-navigation

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
@@ -15,13 +16,13 @@
     sections = ["blog", "projects"]
     featurePhoto = "/img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk
     fullCover = false
+    style = ""
 # toml-docs-end home
 
 # toml-docs-start navigation
 [navigation]
-    logo = "/img/logo_embedded.svg"
-    color = "white"
-    style = "light"
+    logo = "/img/logo_icon.svg"
+    color = "body"
     fixed = true
     offset = "4em"
     search = true
@@ -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">
@@ -32,6 +32,7 @@ showComments: false
 
 Additional features include:
 
+* Switching between light mode and dark mode
 * Support for multiple languages
 * Reusable Bootstrap components through configurable shortcodes and partials
 * Embedded comments through light-weight integration with GitHub via [utteranc.es]({{< param "links.utterances" >}})

content/en/blog/bootstrap-elements.md

@@ -0,0 +1,243 @@
+---
+author: Mark Dumay
+title: Bootstrap elements
+date: 2023-02-17
+description: Use shortcodes to add common Bootstrap elements with ease.
+tags: ["bootstrap", "shortcode"]
+thumbnail: img/boots.jpg
+photoCredits: <a href="https://unsplash.com/@nate_dumlao">Nathan Dumlao</a>
+photoSource: <a href="https://unsplash.com/photos/QLPWQvHvmII">Unsplash</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 supports HTML content too.
+  {{</* /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.
+
+{{< 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 blog 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.
+
+<!-- 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 -->

content/en/blog/code-highlighting.md

@@ -1,58 +0,0 @@
----
-author: "Mark Dumay"
-title: "Code Highlighting"
-date: 2022-04-16
-description: "Examples on how to enable code highlighting."
-tags: ["code"]
-thumbnail: img/notepad.jpg
-photoCredits: <a href="https://unsplash.com/@frederickjmedina">Frederick Medina</a>
-photoSource: <a href="https://unsplash.com/photos/PdfRE-xB--s">Unsplash</a>
----
-
-## Code Fencing
-
-Use code fencing to highlight the syntax of a specific language.
-
-```json
-{
-  "version": "0.2.0",
-  "themes": [],
-  "projects": [],
-  "configuration": {}
-}
-```
-
-```html
-<div class="highlight">
-    <pre>
-        <code>some code...</code>
-    </pre>
-</div>
-```
-
-## Highlight Shortcode
-
-Use the `highlight` shortcode to customize the layout of a specific code block.
-
-{{< highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" >}}
-// GetTitleFunc returns a func that can be used to transform a string to
-// title case.
-//
-// The supported styles are
-//
-// - "Go" (strings.Title)
-// - "AP" (see https://www.apstylebook.com/)
-// - "Chicago" (see https://www.chicagomanualofstyle.org/home.html)
-//
-// If an unknown or empty style is provided, AP style is what you get.
-func GetTitleFunc(style string) func(s string) string {
-  switch strings.ToLower(style) {
-  case "go":
-    return strings.Title
-  case "chicago":
-    return transform.NewTitleConverter(transform.ChicagoStyle)
-  default:
-    return transform.NewTitleConverter(transform.APStyle)
-  }
-}
-{{< / highlight >}}

content/en/blog/emoji-support.md

@@ -1,24 +0,0 @@
----
-author: "Hugo Authors"
-title: "Emoji Support"
-date: 2021-07-15
-description: "Guide to emoji usage in Hugo."
-tags: ["emoji"]
-# thumbnail: img/dunes.jpg
-thumbnail: https://picsum.photos/id/184/4288/2848.jpg
-photoCredits: <a href="https://unsplash.com/@timdegroot">Tim de Groot</a>
-photoSource: <a href="https://unsplash.com/photos/yNGQ830uFB4">Unsplash</a>
----
-
-Emoji can be enabled in a Hugo project in a number of ways.
-
-<!--more-->
-
-The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
-
-To enable emoji globally, set `enableEmoji` to `true` in your site's [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.
-
-<p><span class="nowrap"><span class="emojify">🙈</span> <code>:see_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙉</span> <code>:hear_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙊</span> <code>:speak_no_evil:</code></span></p>
-<br>
-
-The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes.

content/en/blog/first-post.md

@@ -0,0 +1,14 @@
+---
+author: Mark Dumay
+title: First post
+date: 2022-10-01
+description: This is my first blog post.
+tags: ["blog"]
+thumbnail: img/notepad.jpg
+photoCredits: <a href="https://unsplash.com/@frederickjmedina">Frederick Medina</a>
+photoSource: <a href="https://unsplash.com/photos/PdfRE-xB--s">Unsplash</a>
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate, ante in luctus congue, leo risus semper justo, vel consequat sapien lectus quis ipsum. In imperdiet urna justo. Nulla vel pellentesque ipsum. Cras congue feugiat dolor ac aliquam. Pellentesque eget dui venenatis, ultrices urna ac, vehicula nibh. Curabitur est lectus, dapibus eu vehicula non, malesuada et dui. Nam enim nulla, egestas et nunc non, elementum aliquet justo. Mauris euismod mauris sapien, eget vestibulum odio dictum sit amet. Morbi nisl elit, placerat at auctor in, finibus ac neque. Curabitur placerat feugiat risus non vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis cursus est, nec posuere libero.
+
+In ac lobortis diam. Curabitur id dui ac nunc mattis rhoncus a sed lorem. Sed lobortis sem turpis, at posuere enim dignissim et. Vivamus fermentum justo quis volutpat volutpat. Proin eget vehicula neque, ut tempus urna. Duis ac ex vel leo pharetra lobortis et vitae lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam erat volutpat. Suspendisse ullamcorper ultrices elementum. Suspendisse mi elit, commodo at varius a, cursus a ligula. Sed et mattis elit, eu luctus arcu. Cras a porttitor libero. Vestibulum tincidunt sed magna at dapibus. Sed quis orci eu lacus aliquam tristique. Integer porttitor ultrices ipsum quis porttitor. Etiam a sodales ligula.

content/en/blog/fourth-post.md

@@ -0,0 +1,16 @@
+---
+author: Mark Dumay
+title: Fourth post
+date: 2023-01-01
+description: This is my fourth blog post.
+tags: ["blog"]
+thumbnail: img/flowers.jpg # https://picsum.photos/id/106/2592/1728
+photoCredits: <a href="https://unsplash.com/@flutterhappy">Arvee Marie</a>
+photoSource: <a href="https://unsplash.com/photos/YnfGtpt2gf4">Unsplash</a>
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus libero in felis accumsan, vitae imperdiet metus vehicula. Quisque nec dignissim purus. In id dui porta sapien posuere viverra nec vel nisi. Sed varius tincidunt lectus, quis sagittis felis interdum id. Proin purus odio, ultrices auctor libero convallis, volutpat gravida turpis. Ut commodo metus orci, quis sagittis lectus rhoncus non. Nulla et lectus tortor. Suspendisse quam felis, molestie non odio quis, consequat venenatis orci. Etiam sed turpis sit amet elit scelerisque imperdiet. Sed suscipit felis non nibh suscipit egestas. Nulla sodales libero non rhoncus consequat. Nunc in elit at est cursus congue ut ac velit. Cras luctus libero augue, id semper sapien volutpat ultrices.
+
+Pellentesque sit amet sollicitudin nibh. Cras in dolor eget quam feugiat ultricies in ac lectus. Ut venenatis vitae justo quis pretium. Pellentesque vulputate nulla ac est iaculis vulputate. Proin pellentesque sem nec molestie imperdiet. Duis eu molestie sapien, vel ultricies lacus. Donec in felis tempus, rutrum ipsum at, fermentum felis. Praesent mi odio, semper non vulputate vitae, vulputate quis ex.
+
+Nunc rhoncus eleifend gravida. Aliquam feugiat tristique pellentesque. Pellentesque vel elit sed nulla commodo convallis. Curabitur placerat sapien augue, ac semper metus volutpat non. Sed semper ultricies enim, consequat convallis justo placerat eget. Ut fermentum leo facilisis metus congue commodo. Vestibulum consectetur magna vitae ullamcorper sodales. Nulla lobortis aliquam odio id tincidunt. Suspendisse efficitur auctor tortor non consequat. Quisque sit amet posuere lorem, convallis bibendum nisi. Proin ullamcorper justo tempus dignissim scelerisque. Quisque sit amet sapien libero. Phasellus eget enim velit. Proin ut fermentum dui. Proin gravida tortor in ligula lacinia, id dapibus dui tincidunt. Mauris suscipit nisi et urna consectetur, non venenatis nisi euismod.

content/en/blog/markdown-syntax.md

@@ -1,165 +0,0 @@
----
-author: Hugo Authors
-title: Markdown Syntax Guide
-description: Use Markdown syntax and basic HTML elements to style your Hugo content files.
-tags: ["markdown", "css", "html"]
-date: 2022-01-14
-thumbnail: img/phone.jpg # https://picsum.photos/id/160/3200/2119
-photoCredits: <a href="https://unsplash.com/@thomweerd">Thom</a> 
-photoSource: <a href="https://unsplash.com/photos/Zdcq3iKly6g">Unsplash</a>
----
-
-This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
-
-<!--more-->
-
-## Headings
-
-The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
-
-<!-- markdownlint-disable-next-line -->
-# H1
-
-## H2
-
-### H3
-
-#### H4
-
-##### H5
-
-###### H6
-
-## Paragraph
-
-Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
-
-Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
-
-## Blockquotes
-
-The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
-
-### Blockquote without attribution
-
-> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
-> **Note** that you can use _Markdown syntax_ within a blockquote.
-{.blockquote}
-
-### Blockquote with attribution
-
-> Don't communicate by sharing memory, share memory by communicating.<br>
-> — <cite>Rob Pike[^1]</cite>
-{.blockquote}
-
-[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
-
-<figure>
-  <blockquote class="blockquote">
-    <p>A well-known quote, contained in a blockquote element.</p>
-  </blockquote>
-  <figcaption class="blockquote-footer">
-    Someone famous in <cite title="Source Title">Source Title</cite>
-  </figcaption>
-</figure>
-
-## Tables
-
-Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.
-
-| Name  | Age |
-| ----- | --- |
-| Bob   | 27  |
-| Alice | 23  |
-{.table}
-
-### Inline Markdown within tables
-
-| Italics   | Bold     | Code   |
-| --------- | -------- | ------ |
-| _italics_ | **bold** | `code` |
-{.table}
-
-## Code Blocks
-
-### Code block with backticks
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Example HTML5 Document</title>
-  </head>
-  <body>
-    <p>Test</p>
-  </body>
-</html>
-```
-
-<!-- markdownlint-disable MD046 -->
-### Code block indented with four spaces
-
-    <!doctype html>
-    <html lang="en">
-    <head>
-      <meta charset="utf-8">
-      <title>Example HTML5 Document</title>
-    </head>
-    <body>
-      <p>Test</p>
-    </body>
-    </html>
-<!-- markdownlint-enable MD046 -->
-
-### Code block with Hugo's internal highlight shortcode
-
-{{< highlight html >}}
-
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Example HTML5 Document</title>
-</head>
-<body>
-  <p>Test</p>
-</body>
-</html>
-{{< /highlight >}}
-
-## List Types
-
-### Ordered List
-
-1. First item
-2. Second item
-3. Third item
-
-### Unordered List
-
-- List item
-- Another item
-- And another item
-
-### Nested list
-
-- Fruit
-  - Apple
-  - Orange
-  - Banana
-- Dairy
-  - Milk
-  - Cheese
-
-## Other Elements — abbr, sub, sup, kbd, mark
-
-<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
-
-H<sub>2</sub>O
-
-X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
-
-Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
-
-Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.

content/en/blog/rich-content.md

@@ -1,34 +0,0 @@
----
-author: "Hugo Authors"
-title: "Rich Content"
-date: 2021-07-13
-description: "A brief description of Hugo Shortcodes."
-tags: ["shortcode", "privacy"]
-thumbnail: img/flowers.jpg # https://picsum.photos/id/106/2592/1728
-photoCredits: <a href="https://unsplash.com/@flutterhappy">Arvee Marie</a>
-photoSource: <a href="https://unsplash.com/photos/YnfGtpt2gf4">Unsplash</a>
----
-
-Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.
-
-## <!--more-->
-
-## YouTube Privacy Enhanced Shortcode
-
-{{< youtube id="ZJthWmvUzzc" class="video">}}
-
-<br>
-
----
-
-## Twitter Simple Shortcode
-
-{{< twitter_simple user="SanDiegoZoo" id="1453110110599868418" >}}
-
-<br>
-
----
-
-## Vimeo Simple Shortcode
-
-{{< vimeo_simple id="48912912" class="__h_video" >}}

content/en/blog/second-post.md

@@ -0,0 +1,16 @@
+---
+author: Mark Dumay
+title: Second post
+date: 2022-11-01
+description: This is my second blog post.
+tags: ["blog"]
+thumbnail: img/phone.jpg # https://picsum.photos/id/160/3200/2119
+photoCredits: <a href="https://unsplash.com/@thomweerd">Thom</a> 
+photoSource: <a href="https://unsplash.com/photos/Zdcq3iKly6g">Unsplash</a>
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin sapien. Ut porttitor lectus eu tempor ultricies. Sed semper tincidunt nibh pellentesque condimentum. Vivamus dictum sem eu rhoncus semper. Vestibulum convallis congue tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris magna urna, egestas sit amet ligula quis, viverra semper arcu. Praesent laoreet nunc vitae nulla posuere facilisis.
+
+Nunc eget dignissim ex, sed lobortis leo. Suspendisse mollis posuere tellus, in viverra nunc ullamcorper vitae. Nam vel tempor arcu, in imperdiet odio. Fusce malesuada vehicula odio, in iaculis nulla congue eget. Quisque id odio id nisl facilisis posuere porta sit amet mauris. Curabitur lorem leo, tempus id rhoncus eget, placerat vitae lectus. Morbi eu aliquet enim. Nulla malesuada laoreet sodales.
+
+Nunc volutpat dui in elit euismod, sed egestas purus tristique. Nam in condimentum mauris. Praesent nec suscipit enim. Aliquam dolor ipsum, faucibus vitae purus ac, congue egestas nisi. Donec hendrerit erat eu arcu porttitor rhoncus. Nunc a odio bibendum metus semper pellentesque. Sed at sapien ut est semper eleifend. Aliquam lorem libero, porttitor nec tristique ut, auctor vitae ipsum. Suspendisse pretium pharetra rutrum. Nulla tincidunt tempus enim eu sagittis. Maecenas pulvinar metus a urna mattis dictum sed id tellus.

content/en/blog/third-post.md

@@ -0,0 +1,16 @@
+---
+author: Mark Dumay
+title: Third post
+date: 2022-12-01
+description: This is my third blog post.
+tags: ["blog"]
+thumbnail: https://picsum.photos/id/184/4288/2848.jpg
+photoCredits: <a href="https://unsplash.com/@timdegroot">Tim de Groot</a>
+photoSource: <a href="https://unsplash.com/photos/yNGQ830uFB4">Unsplash</a>
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id scelerisque ligula. Vestibulum eu lorem tortor. Suspendisse tristique ultrices mauris, non maximus lorem faucibus in. Suspendisse sagittis eleifend dapibus. Curabitur dignissim luctus sapien eu consequat. Proin congue dui vel ipsum bibendum varius. Pellentesque cursus nisi metus, egestas eleifend ipsum sollicitudin vitae. Sed vitae erat elementum, semper turpis sed, molestie nulla.
+
+Nulla molestie ultrices vehicula. Etiam iaculis, erat a blandit blandit, nulla tellus dapibus ligula, vitae venenatis turpis diam non felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae arcu in justo iaculis egestas. In imperdiet arcu vitae pharetra commodo. Quisque ut erat eget nisl semper laoreet vitae eget ligula. Mauris bibendum purus nec vulputate faucibus. In luctus sagittis ante, quis laoreet orci bibendum vitae. Nam at odio accumsan, tincidunt eros at, lacinia metus. In et ultricies sapien, a mollis est. Nunc convallis orci eu tristique euismod. Proin vel ullamcorper diam. Quisque et semper orci. Proin pharetra lorem justo, id malesuada erat feugiat sit amet. Praesent bibendum mi at lorem volutpat suscipit. Morbi sed libero elit.
+
+Nunc sodales est eu ipsum volutpat, in mollis dui facilisis. Nulla faucibus interdum lectus, a condimentum elit vulputate eu. Nunc ipsum risus, suscipit sit amet nulla ac, pulvinar maximus nulla. In venenatis diam erat, non elementum ante dignissim posuere. Aliquam sem justo, luctus at vestibulum ut, egestas ut quam. Quisque a dolor viverra, aliquam nunc vel, lacinia nulla. In id magna magna. Morbi dapibus pretium sollicitudin. Morbi volutpat augue at felis tristique, quis euismod tellus vulputate. Morbi dui lacus, aliquam eget quam vel, vestibulum faucibus enim. Proin porta pretium metus id venenatis. Aliquam nec tempor lorem. Vivamus euismod est varius sagittis placerat. Maecenas tincidunt elementum libero, at imperdiet elit feugiat vel.

content/nl/about.md

@@ -1,14 +1,12 @@
 ---
-slug: "over-mij"
-title: "Over mij"
-description: "Een blog thema voor Hugo gebaseerd op Bootstrap 5."
-date: "2022-04-11"
+slug: over-mij
+title: Over mij
+description: Een blog en documentatie thema voor Hugo gebaseerd op Bootstrap 5.
+date: 2023-02-17
 showComments: false
 ---
 
-<p class="text-center"><img src="/img/logo_embedded.svg" class="img-fluid w-50" alt="Logo"></p>
-
-<center>Hinode is een blog thema voor Hugo, een open-source statische website generator.</center>
+<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">
   <div class="container-fluid">
@@ -35,13 +33,15 @@ showComments: false
 
 Overige functies:
 
-* Reacties
-* Sociale links
-* Paginering
-* Scrollspy
-* Code markeren
-* Kleuren aanpassen
-* Internationalisering
+* Omschakelen tussen donkere en lichte modus
+* Ondersteuning voor meerdere talen
+* Herbruikbare Bootstrap componenten via shortcodes en partials
+* Integreren van commentaar via [utteranc.es]({{< param "links.utterances" >}})
+* Secundaire navigatie voor bijvoorbeeld documentatie
+* Optimalisering van foto's voor meerdere schermafmetingen en resoluties
+* Optimale zoekresultaten, met 100 punten voor SEO volgens [PageSpeed Insights]({{< param "links.pagespeed" >}})
+* Veilige communicatie, met een score van A+ volgens [Mozilla Observatory]({{< param "links.observatory" >}})
+{.tickmark}
 
 Hinode is geinspireerd door de volgende thema's:
 

content/nl/blog/_index.md

@@ -1,4 +1,4 @@
 ---
-author: Katheryn Fox
+author: Mark Dumay
 title: Blog
 ---

content/nl/blog/bootstrap-elements.md

@@ -0,0 +1,243 @@
+---
+author: Mark Dumay
+title: Bootstrap elementen
+date: 2023-02-17
+description: Gebruik shortcodes om eenvoudig Bootstrap elementen toe te voegen.
+tags: ["bootstrap", "shortcode"]
+thumbnail: img/boots.jpg
+photoCredits: <a href="https://unsplash.com/@nate_dumlao">Nathan Dumlao</a>
+photoSource: <a href="https://unsplash.com/photos/QLPWQvHvmII">Unsplash</a>
+---
+
+Hinode beschikt over meerdere shortcodes om eenvoudig Bootstrap elementen toe te voegen aan je website. De [officiële documentatie]({{< param "links.hinode_docs" >}}) bevat meer details.
+
+## Accordion
+
+De volgende shortcode toont een accordion met drie elementen, waarvan de eerste is uitgeklapt.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* accordion */>}}
+  {{</* accordion-item header="Accordion Item #1" show="true" */>}}
+    Dit is de inhoud van het eerste element met ondersteuning voor HTML. De waarde <code>show</code>
+    voor het argument <code>class</code> geeft aan dat het element uitgeklapt moet worden.
+  {{</* /accordion-item */>}}
+  {{</* accordion-item header="Accordion Item #2" */>}}
+    Dit is de inhoud van het tweede element. Het ondersteunt ook HTML.
+  {{</* /accordion-item */>}}
+  {{</* accordion-item header="Accordion Item #3" */>}}
+    Dit is de inhoud van het derde element.
+  {{</* /accordion-item */>}}
+{{</* /accordion */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Alert
+
+De volgende shortcode toont een waarschuwing.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* alert color="danger" dismissible="true" */>}}
+    Een eenvoudige waarschuwing
+{{</* /alert */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Badge
+
+Gebruik HTML code om een label toe te voegen aan een titel. De Bootstrap [documentatie]({{< param "links.bs_badge_heading" >}}) beschrijft meer opties.
+
+{{< example >}}
+<h1>Voorbeeldtekst met grootte één <span class="badge bg-secondary">Nieuw</span></h1>
+<h2>Voorbeeldtekst met grootte twee <span class="badge bg-secondary">Nieuw</span></h2>
+<h3>Voorbeeldtekst met grootte drie <span class="badge bg-secondary">Nieuw</span></h3>
+<h4>Voorbeeldtekst met grootte vier <span class="badge bg-secondary">Nieuw</span></h4>
+<h5>Voorbeeldtekst met grootte vijf <span class="badge bg-secondary">Nieuw</span></h5>
+<h6>Voorbeeldtekst met grootte zes <span class="badge bg-secondary">Nieuw</span></h6>
+{{< /example >}}
+
+## Breadcrumb
+
+De volgende shortcode toont het navigatiepad voor de blog pagina.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* breadcrumb path="blog" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Button
+
+De volgende shortcode toont een knop met een label en een aanwijzing.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* button color="secondary" tooltip="Toon je ongelezen berichten" href="#" badge="99+" */>}}
+    Inbox
+{{</* /button */>}}
+{{< /example>}}
+<!-- markdownlint-enable MD037 -->
+
+## Button group
+
+De volgende shortcode toont een groep van drie knoppen.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* button-group aria-label="Basic example" */>}}
+  {{</* button color="primary" href="#" */>}}Links{{</* /button */>}}
+  {{</* button color="primary" href="#" */>}}Midden{{</* /button */>}}
+  {{</* button color="primary" href="#" */>}}Rechts{{</* /button */>}}
+{{</* /button-group */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Card
+
+De volgende shortcode toont een kaart met een icoon dat linkt naar de [over mij]({{< ref "about" >}}) pagina. De kaart bevat een titel.
+
+<!-- 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
+
+De volgende shortcode toont een carousel met drie pagina's, in een verhouding van 16x9 voor een breedte van 67% op grotere schermen.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* carousel ratio="16x9" class="col-sm-12 col-lg-8 mx-auto" */>}}
+  {{</* img src="img/coffee.jpg" caption="pagina 1" */>}}
+  {{</* img src="img/phone.jpg" caption="pagina 2" */>}}
+  {{</* img src="img/dunes.jpg" caption="pagina 3" */>}}
+{{</* /carousel */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Collapse
+
+De volgende shortcode toont een knop die een informatiepaneel toont of verbergt.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* button collapse="collapse-1" */>}}
+    Trigger panel
+{{</* /button */>}}
+
+{{</* collapse id="collapse-1" class="p-3 border rounded" */>}}
+    Dit is een voorbeeldtekst. Het informatiepaneel is <i>standaard verborgen </i> maar wordt getoond als
+    de gebruiker op de bijbehorende knop drukt.
+{{</* /collapse */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Command prompt
+
+De volgende shortcode toont een prompt voor bash.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* command */>}}
+export MY_VAR=123
+{{</* /command */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+Voeg  `user` en `host` om de gebruikerscontext op te geven. Als aanvulling, `(out)` definieert een outputregel en `\` is een markering die aangeeft dat de regel doorgaat op de volgende regel.
+
+<!-- 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
+
+Gebruik de volgende shortcode om de inhoud van een `toml` of `scss` bestand te tonen.
+
+{{< docs name="theme-colors" file="config/_default/params.toml" >}}
+
+## Icon
+
+De volgende shortcodes tonen drie verschillende iconen:
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* fa square-check */>}}
+{{</* fab linkedin */>}}
+{{</* fas circle-check */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Image
+
+De volgende shortcode toont een plaatje met afgeronde hoeken en een 21x9 verhouding.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* image src="img/flowers.jpg" ratio="21x9" caption="Onderschrift" class="rounded" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Navbar
+
+De volgende shortcode toont een navigatiemenu.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* navbar path="about" color="primary" size="sm" search="false" menus="sample" title="Brand" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Spinner
+
+De volgende shortcode toont een ronddraaiende cirkel.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* spinner color="info" class="text-center" */>}}
+Loading...
+{{</* /spinner */>}}
+{{< /example>}}
+<!-- markdownlint-enable MD037 -->
+
+## Toast
+
+De volgende shortcode toont een knop die een bericht laat verschijnen op het scherm.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* button id="toastButton" */>}}
+    Toon bericht
+{{</* /button */>}}
+
+{{</* toast header="Titel" */>}}
+    Dit is een bericht.
+{{</* /toast */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Tooltip
+
+De volgende shortcode toont een uitleg voor een gekleurde link.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* tooltip color="primary" title="Tooltip" href="#" */>}}
+    Tooltip demonstration
+{{</* /tooltip */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->

content/nl/blog/code-highlighting.md

@@ -1,60 +0,0 @@
----
-author: "Mark Dumay"
-slug: "code-markeren"
-title: "Code markeren"
-date: 2022-04-16
-description: "Voorbeelden om de syntax van een taal te markeren."
-tags: ["code"]
-thumbnail: img/notepad.jpg
-photoCredits: <a href="https://unsplash.com/@frederickjmedina">Frederick Medina</a>
-# credits: Photo by <a href="https://unsplash.com/@frederickjmedina">Frederick Medina</a> on <a href="https://unsplash.com/photos/PdfRE-xB--s">Unsplash</a>
-photoSource: <a href="https://unsplash.com/photos/PdfRE-xB--s">Unsplash</a>
----
-
-## Code Fencing
-
-Gebruik code fencing om de syntax voor een specifieke taal te markeren.
-
-```json
-{
-  "version": "0.2.0",
-  "themes": [],
-  "projects": [],
-  "configuration": {}
-}
-```
-
-```html
-<div class="highlight">
-    <pre>
-        <code>some code...</code>
-    </pre>
-</div>
-```
-
-## Highlight Shortcode
-
-Gebruik de `highlight` shortcode om de lay-out van een taalfragment aan te passen.
-
-{{< highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" >}}
-// GetTitleFunc returns a func that can be used to transform a string to
-// title case.
-//
-// The supported styles are
-//
-// - "Go" (strings.Title)
-// - "AP" (see https://www.apstylebook.com/)
-// - "Chicago" (see https://www.chicagomanualofstyle.org/home.html)
-//
-// If an unknown or empty style is provided, AP style is what you get.
-func GetTitleFunc(style string) func(s string) string {
-  switch strings.ToLower(style) {
-  case "go":
-    return strings.Title
-  case "chicago":
-    return transform.NewTitleConverter(transform.ChicagoStyle)
-  default:
-    return transform.NewTitleConverter(transform.APStyle)
-  }
-}
-{{< / highlight >}}

content/nl/blog/custom-shortcodes.md

@@ -1,204 +0,0 @@
----
-author: "Mark Dumay"
-title: "Extra shortcodes"
-date: 2022-12-05
-modified: 2022-12-31
-description: "Beschikbare shortcodes die gebruik maken van Bootstrap componenten en vormgeving."
-tags: ["bootstrap", "shortcode"]
-thumbnail: img/boots.jpg
-photoCredits: <a href="https://unsplash.com/@nate_dumlao">Nathan Dumlao</a>
-photoSource: <a href="https://unsplash.com/photos/QLPWQvHvmII">Unsplash</a>
----
-
-Bootstrap is een open-source raamwerk voor het ontwikkelen van websites gemaakt door Twitter. Het volgt een aanpak die geschikt is voor meerdere schermformaten, inclusief mobiele apparaten. Bootstrap bevat een uitgebreide collectie van direct bruikbare componenten, zoals navigatiemenu's, paginering, knoppen, en nog veel meer. Om het gebruik hiervan in markdown pagina's te vergemakkelijken, stelt Hinode enkele van deze componenten beschikbaar als Hugo shortcode. De onderstaande paragrafen bieden een overzicht en uitleg van de beschikbare shortcodes.
-
-## Carousel Shortcode
-
-Gebruik de `carousel` shortcode om een carousel van meerdere plaatjes te tonen, analoog aan de [Image Shortcode](#image-shortcode). De shortcode ondersteunt de volgende parameters:
-
-| Parameter | Verplicht | Toelichting |
-|-----------|-----------|-------------|
-| ratio     | Nee       | Verhouding van het plaatje, de mogelijke waarden zijn "1x1", "4x3" (standaard), "16x9", en "21x9". |
-| class     | Nee       | Optionele `class` waarde van het `carousel` element, bijvoorbeeld "w-75". |
-{.table}
-
-Voeg een `img` element toe voor elke pagina van de carousel. Het `img` element ondersteunt de volgende parameters:
-
-| Parameter | Verplicht | Toelichting |
-|-----------|-----------|-------------|
-| src       | Ja        | Verplichte url van het plaatje, bijvoorbeeld "img/boots.jpg" of "https://picsum.photos/id/27/3264/1836". |
-| caption   | Nee       | Optionele beschrijving van het plaatje. Het plaatje wordt iets donkerder gemaakt om het contrast te verhogen. Op kleinere schermen wordt de beschrijving weggelaten. |
-{.table}
-
-Ter illustratie toont de volgende shortcode een carousel met drie pagina's in een verhouding van 16x9 en een relatieve breedte van 67% voor grote schermen.
-
-```html
-{{</* 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 */>}}
-```
-
-Het resultaat ziet er als volgt uit:
-{{< 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 >}}
-
-## Command Prompt Shortcode
-
-De `command` shortcode simuleert een terminal voor `bash`, `powershell` of `sql` shell talen. De shortcode ondersteunt de volgende parameters:
-
-| Parameter | Verplicht | Toelichting |
-|-----------|----------|-------------|
-| user      | Nee | Optionele gebruiker om toe te voegen aan de prompt, bijvoorbeeld "user". |
-| host      | Nee | Optionele omgeving om toe te voegen aan de prompt, bijvoorbeeld "localhost". |
-| prompt    | Nee | Optionele vervanging van de prompt, bijvoorbeeld "PS C:\Users\User>". |
-| shell     | Nee | Type shell, met ondersteuning voor "bash" (standaard), "powershell", of "sql". |
-{.table}
-
-### Bash (standaard shell)
-
-Gebruik de `command` shortcode om een bash terminal te simuleren.
-
-```html
-{{%/* command */%}}
-export MY_VAR=123
-{{%/* /command */%}}
-```
-
-Het resultaat ziet er als volgt uit:
-{{% command %}}
-export MY_VAR=123
-{{% /command %}}
-
-Gebruik `user` en `host` om de gebruikerscontext mee te geven aan de prompt. Maak daarnaast gebruik van `(out)` om output aan te geven, met `\` als markering van een bijbehorende regel.
-
-```html
-{{%/* 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 */%}}
-```
-
-Het resultaat ziet er als volgt uit:
-{{% 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 %}}
-
-### PowerShell
-
-Geef `powershell` op als waarde voor het argument `shell` om een PowerShell terminal te simuleren. Je kunt `prompt` aanpassen om een eventule directory aan te geven. Het backtick `` ` `` symbool geeft aan dat het commando doorgaat op de volgende regel.
-
-```html
-{{%/* command prompt="PS C:\Users\User>" shell="powershell" */%}}
-Write-Host `
-'Hello' `
-'from' `
-'PowerShell!'
-(out)Hello from PowerShell!
-Write-Host 'Goodbye from PowerShell!'
-(out)Goodbye from PowerShell!
-{{%/* /command */%}}
-```
-
-Het resultaat ziet er als volgt uit:
-{{% command prompt="PS C:\Users\User>" shell="powershell" %}}
-Write-Host `
-'Hello' `
-'from' `
-'PowerShell!'
-(out)Hello from PowerShell!
-Write-Host 'Goodbye from PowerShell!'
-(out)Goodbye from PowerShell!
-{{% /command %}}
-
-### SQL
-
-Geef `sql` op als waarde voor het argument `shell` om een SQL terminal te simuleren. Gebruik `(con)` als markering van een bijbehorende regel.
-
-```html
-{{%/* command prompt="mysql>" shell="sql" */%}}
-set @my_var = 'foo';
-set @my_other_var = 'bar';
-CREATE TABLE people ((con)
-first_name VARCHAR(30) NOT NULL,(con)
-last_name VARCHAR(30) NOT NULL(con)
-);
-(out)Query OK, 0 rows affected (0.09 sec)
-insert into people(con)
-values ('John', 'Doe');
-(out)Query OK, 1 row affected (0.02 sec)
-select *(con)
-from people(con)
-order by last_name;
-(out)+------------+-----------+
-(out)| first_name | last_name |
-(out)+------------+-----------+
-(out)| John       | Doe       |
-(out)+------------+-----------+
-(out)1 row in set (0.00 sec)
-{{%/* /command */%}}
-```
-
-Het resultaat ziet er als volgt uit:
-{{% command prompt="mysql>" shell="sql" %}}
-set @my_var = 'foo';
-set @my_other_var = 'bar';
-CREATE TABLE people ((con)
-first_name VARCHAR(30) NOT NULL,(con)
-last_name VARCHAR(30) NOT NULL(con)
-);
-(out)Query OK, 0 rows affected (0.09 sec)
-insert into people(con)
-values ('John', 'Doe');
-(out)Query OK, 1 row affected (0.02 sec)
-select *(con)
-from people(con)
-order by last_name;
-(out)+------------+-----------+
-(out)| first_name | last_name |
-(out)+------------+-----------+
-(out)| John       | Doe       |
-(out)+------------+-----------+
-(out)1 row in set (0.00 sec)
-{{% /command %}}
-
-## Image Shortcode
-
-Gebruik de `image` shortcode om een adaptief plaatje met een specifieke verhouding te tonen. De bron kan verwijzen naar een bestand in de `/assets/img` folder van je website of naar een publieke weblocatie. De shortcode genereert het plaatje als een zogenaamde [image set]({{< param "links.mozilla_image" >}}) om deze te optimaliseren voor meerdere schermformaten en verschillende resoluties. Achter de schermen converteert Hugo de plaatjes naar een `WebP` bestandsformaat en slaat deze op in een lokale folder (`resources` of `public`). De kwaliteit van het plaatje kan worden opgegeven in de sectie `[imaging]` van de site [configuratie]({{< param "links.hugo_imaging" >}}) (75 is de standaardwaarde). De geschikte bestandsformaten zijn `.png`, `.jpeg`, `.gif`, `.tiff`, `.bmp` en `.webp`. Een plaatje in het formaat `.jpeg` is beschikbaar voor oudere browsers. De shortcode ondersteunt de volgende parameters:
-
-| Parameter | Verplicht | Toelichting |
-|-----------|----------|-------------|
-| src       | Ja  | Verplichte url van het plaatje, bijvoorbeeld "img/boots.jpg" of "https://picsum.photos/id/27/3264/1836". |
-| ratio     | Nee | Verhouding van het plaatje, de mogelijke waarden zijn "1x1", "4x3", "16x9", en "21x9". Indien opgegeven wordt het plaatje bijgesneden en verkleind om te voldoen aan de ratio. Als de verhouding niet is opgegeven dan wordt de verhouding van het originele bestand gebruikt. |
-| class     | Nee | Optionele `class` waarde van het `img` element, bijvoorbeeld "rounded". |
-| title     | Nee | Optionele beschrijving van het plaatje. |
-| caption   | Nee | Optioneel onderschrift van het plaatje. |
-{.table}
-
-Ter illustratie toont de volgende shortcode een plaatje met afgeronde hoeken en een verhouding van 21x9.
-
-```html
-{{</* image src="img/flowers.jpg" ratio="21x9" caption="Onderschrift" class="rounded" */>}}
-```
-
-Het resultaat ziet er als volgt uit:
-{{< image src="img/flowers.jpg" ratio="21x9" caption="Onderschrift" class="rounded">}}

content/nl/blog/emoji-support.md

@@ -1,25 +0,0 @@
----
-author: "Hugo Authors"
-slug: "emoji-ondersteuning"
-title: "Emoji ondersteuning"
-date: 2021-07-15
-description: "Gids voor het gebruik van emoji met Hugo."
-tags: ["emoji"]
-# thumbnail: img/dunes.jpg
-thumbnail: https://picsum.photos/id/184/4288/2848.jpg
-photoCredits: <a href="https://unsplash.com/@timdegroot">Tim de Groot</a>
-photoSource: <a href="https://unsplash.com/photos/yNGQ830uFB4">Unsplash</a>
----
-
-Je kunt op meerdere manieren emoji gebruiken binnen Hugo.
-
-<!--more-->
-
-Je kunt de [`emojify`](https://gohugo.io/functions/emojify/) functie direct aanroepen vanuit een template of [Inline Shortcode](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
-
-Zet de waarde `enableEmoji` op `true` in de globale [configuratie](https://gohugo.io/getting-started/configuration/) om emoji direct te kunnen gebruiken in content, bijvoorbeeld:
-
-<p><span class="nowrap"><span class="emojify">🙈</span> <code>:see_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙉</span> <code>:hear_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙊</span> <code>:speak_no_evil:</code></span></p>
-<br>
-
-De [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) geeft een handig overzicht van alle beschikbare emoji codes.

content/nl/blog/first-post.md

@@ -0,0 +1,14 @@
+---
+author: Mark Dumay
+title: Eerste artikel
+date: 2022-10-01
+description: Dit is mijn eerste artikel.
+tags: ["blog"]
+thumbnail: img/notepad.jpg
+photoCredits: <a href="https://unsplash.com/@frederickjmedina">Frederick Medina</a>
+photoSource: <a href="https://unsplash.com/photos/PdfRE-xB--s">Unsplash</a>
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate, ante in luctus congue, leo risus semper justo, vel consequat sapien lectus quis ipsum. In imperdiet urna justo. Nulla vel pellentesque ipsum. Cras congue feugiat dolor ac aliquam. Pellentesque eget dui venenatis, ultrices urna ac, vehicula nibh. Curabitur est lectus, dapibus eu vehicula non, malesuada et dui. Nam enim nulla, egestas et nunc non, elementum aliquet justo. Mauris euismod mauris sapien, eget vestibulum odio dictum sit amet. Morbi nisl elit, placerat at auctor in, finibus ac neque. Curabitur placerat feugiat risus non vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis cursus est, nec posuere libero.
+
+In ac lobortis diam. Curabitur id dui ac nunc mattis rhoncus a sed lorem. Sed lobortis sem turpis, at posuere enim dignissim et. Vivamus fermentum justo quis volutpat volutpat. Proin eget vehicula neque, ut tempus urna. Duis ac ex vel leo pharetra lobortis et vitae lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam erat volutpat. Suspendisse ullamcorper ultrices elementum. Suspendisse mi elit, commodo at varius a, cursus a ligula. Sed et mattis elit, eu luctus arcu. Cras a porttitor libero. Vestibulum tincidunt sed magna at dapibus. Sed quis orci eu lacus aliquam tristique. Integer porttitor ultrices ipsum quis porttitor. Etiam a sodales ligula.

content/nl/blog/fourth-post.md

@@ -0,0 +1,16 @@
+---
+author: Mark Dumay
+title: Vierde artikel
+date: 2023-01-01
+description: Dit is mijn vierde artikel.
+tags: ["blog"]
+thumbnail: img/flowers.jpg # https://picsum.photos/id/106/2592/1728
+photoCredits: <a href="https://unsplash.com/@flutterhappy">Arvee Marie</a>
+photoSource: <a href="https://unsplash.com/photos/YnfGtpt2gf4">Unsplash</a>
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus libero in felis accumsan, vitae imperdiet metus vehicula. Quisque nec dignissim purus. In id dui porta sapien posuere viverra nec vel nisi. Sed varius tincidunt lectus, quis sagittis felis interdum id. Proin purus odio, ultrices auctor libero convallis, volutpat gravida turpis. Ut commodo metus orci, quis sagittis lectus rhoncus non. Nulla et lectus tortor. Suspendisse quam felis, molestie non odio quis, consequat venenatis orci. Etiam sed turpis sit amet elit scelerisque imperdiet. Sed suscipit felis non nibh suscipit egestas. Nulla sodales libero non rhoncus consequat. Nunc in elit at est cursus congue ut ac velit. Cras luctus libero augue, id semper sapien volutpat ultrices.
+
+Pellentesque sit amet sollicitudin nibh. Cras in dolor eget quam feugiat ultricies in ac lectus. Ut venenatis vitae justo quis pretium. Pellentesque vulputate nulla ac est iaculis vulputate. Proin pellentesque sem nec molestie imperdiet. Duis eu molestie sapien, vel ultricies lacus. Donec in felis tempus, rutrum ipsum at, fermentum felis. Praesent mi odio, semper non vulputate vitae, vulputate quis ex.
+
+Nunc rhoncus eleifend gravida. Aliquam feugiat tristique pellentesque. Pellentesque vel elit sed nulla commodo convallis. Curabitur placerat sapien augue, ac semper metus volutpat non. Sed semper ultricies enim, consequat convallis justo placerat eget. Ut fermentum leo facilisis metus congue commodo. Vestibulum consectetur magna vitae ullamcorper sodales. Nulla lobortis aliquam odio id tincidunt. Suspendisse efficitur auctor tortor non consequat. Quisque sit amet posuere lorem, convallis bibendum nisi. Proin ullamcorper justo tempus dignissim scelerisque. Quisque sit amet sapien libero. Phasellus eget enim velit. Proin ut fermentum dui. Proin gravida tortor in ligula lacinia, id dapibus dui tincidunt. Mauris suscipit nisi et urna consectetur, non venenatis nisi euismod.

content/nl/blog/markdown-syntax.md

@@ -1,15 +0,0 @@
----
-author: "Hugo Authors"
-slug: "markdown-syntax-handleiding"
-title: "Markdown syntax handleiding"
-description: "Een voorbeeldartikel die het gebruik van Markdown illustreert."
-tags: ["markdown", "css", "html"]
-date: 2022-01-14
-thumbnail: img/phone.jpg # https://picsum.photos/id/160/3200/2119
-photoCredits: <a href="https://unsplash.com/@thomweerd">Thom</a> 
-photoSource: <a href="https://unsplash.com/photos/Zdcq3iKly6g">Unsplash</a>
----
-
-Nunc porta nisi ac massa tincidunt, ac facilisis magna faucibus. Nullam consectetur luctus ante, sed venenatis quam malesuada id. Curabitur tempus semper elit, in euismod justo vestibulum nec. Nulla luctus, arcu non venenatis posuere, sapien dolor interdum massa, eget feugiat ipsum nulla sed orci. Vivamus sit amet gravida diam. Morbi aliquam urna et congue tincidunt. Vestibulum tincidunt libero non dolor viverra, non malesuada nisl ultricies. Fusce venenatis justo non nisl pretium auctor. Aliquam fermentum metus sem, porttitor auctor diam elementum a. Phasellus vel ornare ante. Nunc blandit dictum rhoncus.
-
-Proin sagittis felis sed euismod interdum. Duis pellentesque tempus leo non luctus. Integer convallis ultricies rhoncus. Donec eu mauris eget justo dictum efficitur imperdiet et nibh. Sed ornare enim eros, et ornare sem accumsan sodales. Maecenas pellentesque sollicitudin massa quis varius. Integer et tempor arcu. Curabitur vitae varius metus, at luctus massa. Pellentesque fringilla neque congue ultricies fermentum. Curabitur vulputate eros eget eros pharetra dignissim. Morbi pulvinar iaculis tincidunt.

content/nl/blog/rich-content.md

@@ -1,35 +0,0 @@
----
-author: "Hugo Authors"
-slug: "multimedia"
-title: "Multimedia"
-date: 2021-07-13
-description: "Een overzicht van enkele Hugo Shortcodes."
-tags: ["shortcode", "privacy"]
-thumbnail: img/flowers.jpg # https://picsum.photos/id/106/2592/1728
-photoCredits: <a href="https://unsplash.com/@flutterhappy">Arvee Marie</a>
-photoSource: <a href="https://unsplash.com/photos/YnfGtpt2gf4">Unsplash</a>
----
-
-Hugo biedt diverse [shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes) voor het toevoegen van multimedia, inclusief een [privacy configuratie](https://gohugo.io/about/hugo-and-gdpr/) en een verzameling van eenvoudige shortcodes voor het toevoegen van statische en no-JS versies van diverse sociale media.
-
-## <!--more-->
-
-## YouTube Privacy Enhanced Shortcode
-
-{{< youtube id="ZJthWmvUzzc" class="video">}}
-
-<br>
-
----
-
-## Twitter Simple Shortcode
-
-{{< twitter_simple user="SanDiegoZoo" id="1453110110599868418" >}}
-
-<br>
-
----
-
-## Vimeo Simple Shortcode
-
-{{< vimeo_simple id="48912912" class="__h_video" >}}

content/nl/blog/second-post.md

@@ -0,0 +1,16 @@
+---
+author: Mark Dumay
+title: Tweede artikel
+date: 2022-11-01
+description: Dit is mijn tweede artikel.
+tags: ["blog"]
+thumbnail: img/phone.jpg # https://picsum.photos/id/160/3200/2119
+photoCredits: <a href="https://unsplash.com/@thomweerd">Thom</a> 
+photoSource: <a href="https://unsplash.com/photos/Zdcq3iKly6g">Unsplash</a>
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin sapien. Ut porttitor lectus eu tempor ultricies. Sed semper tincidunt nibh pellentesque condimentum. Vivamus dictum sem eu rhoncus semper. Vestibulum convallis congue tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris magna urna, egestas sit amet ligula quis, viverra semper arcu. Praesent laoreet nunc vitae nulla posuere facilisis.
+
+Nunc eget dignissim ex, sed lobortis leo. Suspendisse mollis posuere tellus, in viverra nunc ullamcorper vitae. Nam vel tempor arcu, in imperdiet odio. Fusce malesuada vehicula odio, in iaculis nulla congue eget. Quisque id odio id nisl facilisis posuere porta sit amet mauris. Curabitur lorem leo, tempus id rhoncus eget, placerat vitae lectus. Morbi eu aliquet enim. Nulla malesuada laoreet sodales.
+
+Nunc volutpat dui in elit euismod, sed egestas purus tristique. Nam in condimentum mauris. Praesent nec suscipit enim. Aliquam dolor ipsum, faucibus vitae purus ac, congue egestas nisi. Donec hendrerit erat eu arcu porttitor rhoncus. Nunc a odio bibendum metus semper pellentesque. Sed at sapien ut est semper eleifend. Aliquam lorem libero, porttitor nec tristique ut, auctor vitae ipsum. Suspendisse pretium pharetra rutrum. Nulla tincidunt tempus enim eu sagittis. Maecenas pulvinar metus a urna mattis dictum sed id tellus.

content/nl/blog/third-post.md

@@ -0,0 +1,16 @@
+---
+author: Mark Dumay
+title: Derde artikel
+date: 2022-12-01
+description: Dit is mijn derde artikel.
+tags: ["blog"]
+thumbnail: https://picsum.photos/id/184/4288/2848.jpg
+photoCredits: <a href="https://unsplash.com/@timdegroot">Tim de Groot</a>
+photoSource: <a href="https://unsplash.com/photos/yNGQ830uFB4">Unsplash</a>
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id scelerisque ligula. Vestibulum eu lorem tortor. Suspendisse tristique ultrices mauris, non maximus lorem faucibus in. Suspendisse sagittis eleifend dapibus. Curabitur dignissim luctus sapien eu consequat. Proin congue dui vel ipsum bibendum varius. Pellentesque cursus nisi metus, egestas eleifend ipsum sollicitudin vitae. Sed vitae erat elementum, semper turpis sed, molestie nulla.
+
+Nulla molestie ultrices vehicula. Etiam iaculis, erat a blandit blandit, nulla tellus dapibus ligula, vitae venenatis turpis diam non felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae arcu in justo iaculis egestas. In imperdiet arcu vitae pharetra commodo. Quisque ut erat eget nisl semper laoreet vitae eget ligula. Mauris bibendum purus nec vulputate faucibus. In luctus sagittis ante, quis laoreet orci bibendum vitae. Nam at odio accumsan, tincidunt eros at, lacinia metus. In et ultricies sapien, a mollis est. Nunc convallis orci eu tristique euismod. Proin vel ullamcorper diam. Quisque et semper orci. Proin pharetra lorem justo, id malesuada erat feugiat sit amet. Praesent bibendum mi at lorem volutpat suscipit. Morbi sed libero elit.
+
+Nunc sodales est eu ipsum volutpat, in mollis dui facilisis. Nulla faucibus interdum lectus, a condimentum elit vulputate eu. Nunc ipsum risus, suscipit sit amet nulla ac, pulvinar maximus nulla. In venenatis diam erat, non elementum ante dignissim posuere. Aliquam sem justo, luctus at vestibulum ut, egestas ut quam. Quisque a dolor viverra, aliquam nunc vel, lacinia nulla. In id magna magna. Morbi dapibus pretium sollicitudin. Morbi volutpat augue at felis tristique, quis euismod tellus vulputate. Morbi dui lacus, aliquam eget quam vel, vestibulum faucibus enim. Proin porta pretium metus id venenatis. Aliquam nec tempor lorem. Vivamus euismod est varius sagittis placerat. Maecenas tincidunt elementum libero, at imperdiet elit feugiat vel.

i18n/de.yaml

@@ -53,6 +53,18 @@
   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"
+- id: toggleMainNav
+  translation: "Hauptmenü anzuzeigen oder auszublenden"
 
 # 404 page
 - id: pageNotFound

i18n/en.yaml

@@ -53,6 +53,18 @@
   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"
+- id: toggleMainNav
+  translation: "Toggle main navigation"
 
 # 404 page
 - id: pageNotFound

i18n/nl.yaml

@@ -53,6 +53,18 @@
   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"
+- id: toggleMainNav
+  translation: "Toon of verberg hoofdnavigatie"
 
 # 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,18 +1,18 @@
 {{- 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>
 
     <body>
-        <div class="d-flex flex-column min-vh-100">
+        <div class="d-flex flex-column min-vh-100{{ if and .IsHome .Site.Params.home.style }} {{ .Site.Params.home.style }}{{ end }}">
             <div class="{{ if .Site.Params.navigation.fixed }}mb-4{{ end }}">
                 {{- partial "assets/navbar.html" (dict
                     "page" .
                     "fixed" (string .Site.Params.navigation.fixed)
-                    "color" (default "white" .Site.Params.navigation.color)
+                    "color" (.Site.Params.navigation.color)
                     "style" (default "light" .Site.Params.navigation.style))
                 -}}
             </div>

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-group.html

@@ -19,7 +19,7 @@
     In addition, the following arguments are passed to the individual cards.
     "class"         Optional class attribute of the card element, e.g. “w-50”.
     "color":        Optional theme color of the card, either "primary", "secondary", "success", "danger",
-                    "warning", "info", "light", or "dark". By default, no color is specified.
+                    "warning", "info", "light", "dark", or "body". By default, no color is specified.
     "padding":      Optional padding of the content, either "0", "1", "2", "3", "4", "5", or "auto" (default).
     "header"        Optional header components of the card, displayed in small caps. Supported values are "full"
                     (default), "publication", "tags", and "none".

layouts/partials/assets/card.html

@@ -8,7 +8,7 @@
     "href"          Required address for the button or hyperlink.
     "class"         Optional class attribute of the card element, e.g. “w-50”.
     "color":        Optional theme color of the card, either "primary", "secondary", "success", "danger",
-                    "warning", "info", "light", "dark", "white" or "black". By default, no color is specified.
+                    "warning", "info", "light", "dark", "white", "black", or "body". By default, no color is specified.
     "padding":      Optional padding of the content, either "0", "1", "2", "3", "4", "5", or "auto" (default).
     "header"        Optional header components of the card, displayed in small caps. Supported values are "full"
                     (default), "publication", "tags", and "none".
@@ -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" -}}
@@ -81,7 +81,7 @@
 {{- $color := "" -}}
 {{- with .color }}{{ $color = . }}{{ end -}}
 {{- if $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 -}}

layouts/partials/assets/navbar.html

@@ -3,7 +3,6 @@
     "page"          Required object reference to the current page.
     "menus"         Optional name of the menu configuration, defaults to "main".
     "size"          Optional size of the button, either "sm", "md" (default), or "lg".
-    "style"         Optional style of the navbar, either "light" (default) or "dark".
     "fixed"         Optional flag to indicate the navbar should stick to the top, defaults to false.
     "color"         Optional background color of the navbar, either "primary", "secondary", "success",
                     "danger", "warning", "info", "light", "dark", "white" or "black". The default color is none.
@@ -37,13 +36,6 @@
     {{- errorf "Invalid value for param 'size': %s" $size -}}
 {{- end -}}
 
-{{- $style := "light" -}}
-{{- with .style }}{{ $style = . }}{{ end -}}
-{{- $supportedStyles := slice "light" "dark" -}}
-{{- if not (in $supportedStyles $style) -}}
-    {{- errorf "Invalid value for param 'style': %s" $style -}}
-{{- end -}}
-
 {{- $fixedParam := "false" -}}
 {{- $fixed := false -}}
 {{- with .fixed }}{{ $fixedParam = . }}{{ end -}}
@@ -53,13 +45,10 @@
     {{- errorf "Invalid value for param 'fixed': %s" $fixedParam -}}
 {{- end -}}
 
-{{- $inverseStyle := "light" -}}
-{{- if eq $style "light" }}{{ $inverseStyle = "dark" }}{{ end -}}
-
 {{- $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 +64,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,11 +79,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 invisible sidebar toggler to center logo correctly on smaller screens -->
+            <button class="navbar-toggler collapsed ms-n3 invisible" type="button">
                 {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
             </button>
         {{- end -}}
@@ -106,11 +103,11 @@
         </a>
 
         <!-- 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>
+		<button id="main-nav-toggler" 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="{{ T "toggleMainNav" }}">
+			<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 +125,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 +148,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 +175,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/partials/breadcrumb.html

@@ -1,7 +1,7 @@
 <nav aria-label="breadcrumb">
     <ol class="breadcrumb">
         {{- range .Page.Ancestors.Reverse -}}
-            <li class="breadcrumb-item"><a href="{{ .Permalink }}">{{ if .Title }}{{ .Title }}{{ else }}{{ T "home" }}{{ end }}</a></li>
+            <li class="breadcrumb-item"><a href="{{ .Permalink }}">{{ if not .IsHome }}{{ .Title }}{{ else }}{{ T "home" }}{{ end }}</a></li>
         {{- end -}}
         <li class="breadcrumb-item active" aria-current="page">{{ .Page.Title }}</li>
     </ol>

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/shortcodes/navbar.html

@@ -49,7 +49,7 @@
 {{ $color := "" -}}
 {{ with .Get "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 -}}
         {{ $error = true -}}

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",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.8.1",
+      "version": "0.9.0",
       "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.1",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-7.0.1.tgz",
+      "integrity": "sha512-m5sRdtsB1F5fnC1Ozla7ryftU47wVpO+HWd+JQTqeoG0g/oPh5EfbWfcVHbNCEtuoHfALIySiUWS20pz2hX6jA==",
       "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.1",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-7.0.1.tgz",
+      "integrity": "sha512-m5sRdtsB1F5fnC1Ozla7ryftU47wVpO+HWd+JQTqeoG0g/oPh5EfbWfcVHbNCEtuoHfALIySiUWS20pz2hX6jA==",
       "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",
   "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>