chore(deps): update devdeps non-major (#1053)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.htmlvalidate.json

@@ -3,6 +3,7 @@
   "rules": {
     "element-required-content": "off",
     "element-permitted-content": "off",
-    "no-raw-characters": "off"
+    "no-raw-characters": "off",
+    "attribute-misuse": "warn"
   }
 }

.lighthouserc.yml

@@ -19,7 +19,15 @@ ci:
           "is-crawlable",
           "image-size-responsive",
           "render-blocking-resources",
-          "largest-contentful-paint"
+          "largest-contentful-paint",
+          "unused-css-rules",
+          "network-dependency-tree-insight",
+          "legacy-javascript",
+          "errors-in-console",
+          "max-potential-fid",
+          "interactive",
+          "dom-size",
+          "forced-reflow-insight"
         ]
   assert:
     preset: "lighthouse:no-pwa"
@@ -33,6 +41,14 @@ ci:
       image-size-responsive: off
       render-blocking-resources: off
       largest-contentful-paint: off
+      unused-css-rules: off
+      network-dependency-tree-insight: off
+      legacy-javascript: off
+      errors-in-console: off
+      max-potential-fid: off
+      interactive: off
+      dom-size: off
+      forced-reflow-insight: off
       total-byte-weight: warn
       identical-links-same-purpose: warn
       tap-targets: warn

.woodpecker/docs.yml

@@ -44,7 +44,7 @@ steps:
       - event: [pull_request]
 
   - name: build
-    image: quay.io/thegeeklab/hugo:0.140
+    image: quay.io/thegeeklab/hugo:0.148
     commands:
       - hugo --panicOnWarning -s exampleSite/
 

.woodpecker/test.yml

@@ -24,7 +24,7 @@ steps:
       FORCE_COLOR: "true"
 
   - name: testbuild
-    image: quay.io/thegeeklab/hugo:0.140
+    image: quay.io/thegeeklab/hugo:0.148
     depends_on: [assets]
     commands:
       - mkdir -p exampleSite/themes/ && ln -s $(pwd)/ exampleSite/themes/${CI_REPO_NAME}
@@ -44,9 +44,12 @@ steps:
     depends_on: [testbuild]
     commands:
       - lychee --no-progress --format detailed exampleSite/content/ README.md
+    environment:
+      GITHUB_TOKEN:
+        from_secret: github_token_ro
 
   - name: page-validation
-    image: quay.io/thegeeklab/lhci:0.14
+    image: quay.io/thegeeklab/lhci:0.15
     depends_on: [testbuild]
     commands:
       - lhci autorun

README.md

@@ -6,7 +6,7 @@
 [![GitHub contributors](https://img.shields.io/github/contributors/thegeeklab/hugo-geekdoc)](https://github.com/thegeeklab/hugo-geekdoc/graphs/contributors)
 [![License: MIT](https://img.shields.io/github/license/thegeeklab/hugo-geekdoc)](https://github.com/thegeeklab/hugo-geekdoc/blob/main/LICENSE)
 
-Geekdoc is a simple Hugo theme for documentations. It is intentionally designed as a fast and lean theme and may not fit the requirements of complex projects. If a more feature-complete theme is required there are a lot of good alternatives out there. You can find a demo and the full documentation at [https://geekdocs.de](https://geekdocs.de).
+Geekdoc is a simple Hugo theme for documentations. It is intentionally designed as a fast and lean theme and may not fit the requirements of complex projects. If a more feature-complete theme is required there are a lot of great alternatives out there. You can find a demo and the full documentation at [https://geekdocs.de](https://geekdocs.de).
 
 ![Desktop and mobile preview](https://raw.githubusercontent.com/thegeeklab/hugo-geekdoc/main/images/readme.png)
 

exampleSite/content/en/_index.md

@@ -16,7 +16,7 @@ geekdocAnchor: false
 
 <!-- markdownlint-restore -->
 
-Geekdoc is a simple Hugo theme for documentations. It is intentionally designed as a fast and lean theme and may not fit the requirements of complex projects. If a more feature-complete theme is required there are a lot of got alternatives out there.
+Geekdoc is a simple Hugo theme for documentations. It is intentionally designed as a fast and lean theme and may not fit the requirements of complex projects. If a more feature-complete theme is required there are a lot of great alternatives out there.
 
 {{< button size="large" relref="usage/getting-started/" >}}Getting Started{{< /button >}}
 

exampleSite/content/en/features/theming/_index.md

@@ -41,7 +41,7 @@ The minimal steps to load a custom Favicon is to overwrite the three default Fav
 
 ### Full replacement
 
-If you want to add more Favicon formats you have to [overwrite](https://gohugo.io/templates/partials/#partial-template-lookup-order) the default partial that is used to load the files. In the next step you have to place the required files in the `static` folder of your project as well.
+If you want to add more Favicon formats you have to [overwrite](https://gohugo.io/templates/lookup-order/) the default partial that is used to load the files. In the next step you have to place the required files in the `static` folder of your project as well.
 
 **Example:**
 

exampleSite/content/en/shortcodes/audio/_index.md

@@ -0,0 +1,48 @@
+---
+title: Audio
+resources:
+  - name: diamonds-trap
+    src: "diamonds-trap.mp3"
+    title: Diamonds Trap
+    params:
+      credits: "[Jakob Eglmeier on openmusic.academy CC0-1.0](https://openmusic.academy/media-library/b9do2E2ZwVCfppyBf2yuej)"
+---
+
+The audio shortcode allows you to embed audio files.
+
+## Usage
+
+Define your resources in the page front matter, custom parameter `params.credits` is optional.
+
+<!-- spellchecker-disable -->
+
+```md
+---
+resources:
+  - name: diamonds-trap
+    src: "diamonds-trap.mp3"
+    title: Diamonds Trap
+    params:
+      credits: "[Jakob Eglmeier on openmusic.academy CC0-1.0](https://openmusic.academy/media-library/b9do2E2ZwVCfppyBf2yuej)"
+---
+
+{{</* audio name="diamonds-trap" */>}}
+```
+
+### Attributes
+
+<!-- prettier-ignore-start -->
+<!-- spellchecker-disable -->
+{{< propertylist name=shortcode-audio sort=name order=asc >}}
+<!-- spellchecker-enable -->
+<!-- prettier-ignore-end -->
+
+<!-- spellchecker-enable -->
+
+## Example
+
+<!-- spellchecker-disable -->
+
+{{< audio name="diamonds-trap" >}}
+
+<!-- spellchecker-enable -->

exampleSite/content/en/shortcodes/progress.md

@@ -24,5 +24,15 @@ A progress bar shows how far a process has progressed.
 <!-- prettier-ignore-start -->
 <!-- spellchecker-disable -->
 {{< progress title=Eating value=65 icon=gdoc_heart >}}
+
+{{< progress title="Type: note" value=10 icon=gdoc_heart type=note >}}
+
+{{< progress title="Type: tip" value=70 icon=gdoc_heart type=tip >}}
+
+{{< progress title="Type: important" value=30 icon=gdoc_heart type=important >}}
+
+{{< progress title="Type: caution" value=90 icon=gdoc_heart type=caution >}}
+
+{{< progress title="Type: warning" value=80 icon=gdoc_heart type=warning >}}
 <!-- spellchecker-enable -->
 <!-- prettier-ignore-end -->

exampleSite/content/en/usage/configuration.md

@@ -37,6 +37,9 @@ enableRobotsTXT = true
   tag = "tags"
 
 [params]
+  # (Optional, default none) Set a subtitle used in the page header.
+  geekdocSubtitle = "A Hugo theme for documentation"
+
   # (Optional, default 6) Set how many table of contents levels to be showed on page.
   # Use false to hide ToC, note that 0 will default to 6 (https://gohugo.io/functions/default/)
   # You can also specify this parameter per page in front matter.
@@ -167,6 +170,9 @@ taxonomies:
   tag: tags
 
 params:
+  # (Optional, default none) Set a subtitle used in the page header.
+  geekdocSubtitle: "A Hugo theme for documentation"
+
   # (Optional, default 6) Set how many table of contents levels to be showed on page.
   # Use false to hide ToC, note that 0 will default to 6 (https://gohugo.io/functions/default/)
   # You can also specify this parameter per page in front matter.

exampleSite/content/en/usage/customization.md

@@ -0,0 +1,16 @@
+---
+title: Customization
+---
+
+{{< toc >}}
+
+## Custom resources
+
+To add custom resources to your site e.g. CSS or JavaScript files, create the `layouts/partials/head/custom.html` in the root directory of your project. Add the source files you want to include in the `static/` folder of your project, for example `static/css/custom.css` and `static/js/custom.js`. To include the files in your site, add the following code to `layouts/partials/head/custom.html`:
+
+```html
+<link rel="stylesheet" type="text/css" href="/css/custom.css" />
+<script type="text/javascript" src="/js/custom.js"></script>
+```
+
+Ensure to use the absolute path to the files.

exampleSite/data/menu/main.yaml

@@ -8,6 +8,7 @@ main:
           en: Level 1.1 (EN)
           de: Level 1.1 (DE)
         ref: "/toc-tree/level-1/level-1-1"
+        rel: me
       - name: Level 1.2
         ref: "/toc-tree/level-1/level-1-2"
       - name: Level 1.3

exampleSite/data/properties/shortcode-audio.yaml

@@ -0,0 +1,6 @@
+---
+properties:
+  - name: name
+    type: string
+    description: Name of the audio resource defined in page front matter.
+    required: true

exampleSite/data/properties/shortcode-progress.yaml

@@ -1,5 +1,10 @@
 ---
 properties:
+  - name: type
+    type: string
+    description: Color type of the progress bar. Supported values are `main|note|tip|important|caution|warning`.
+    required: false
+    defaultValue: main
   - name: value
     type: integer
     description: Progress value.

layouts/404.html

@@ -13,8 +13,6 @@
 
 
     <div class="wrapper">
-      <input type="checkbox" class="hidden" id="menu-header-control" />
-
       {{ partial "site-header" (dict "Root" . "MenuEnabled" false) }}
 
 

layouts/_default/baseof.html

@@ -22,14 +22,16 @@
   </head>
 
   <body itemscope itemtype="https://schema.org/WebPage">
+    <div class="w-full flex justify-center">
+      <a href="#main-content" id="gdoc-to-main" class="gdoc-markdown__link">Skip to main content</a>
+    </div>
+
     {{ partial "svg-icon-symbols" . }}
 
 
     <div
       class="wrapper {{ if default false .Site.Params.geekdocDarkModeDim }}dark-mode-dim{{ end }}"
     >
-      <input type="checkbox" class="hidden" id="menu-control" />
-      <input type="checkbox" class="hidden" id="menu-header-control" />
       {{ $navEnabled := default true .Page.Params.geekdocNav }}
       {{ partial "site-header" (dict "Root" . "MenuEnabled" $navEnabled) }}
 

layouts/_default/list.html

@@ -4,6 +4,7 @@
 
   <article
     class="gdoc-markdown gdoc-markdown__align--{{ default "left" (.Page.Params.geekdocAlign | lower) }}"
+    id="main-content" tabindex="-1"
   >
     <h1>{{ partial "utils/title" . }}</h1>
     {{ partial "utils/content" . }}

layouts/_default/single.html

@@ -4,6 +4,7 @@
 
   <article
     class="gdoc-markdown gdoc-markdown__align--{{ default "left" (.Page.Params.geekdocAlign | lower) }}"
+    id="main-content" tabindex="-1"
   >
     <h1>{{ partial "utils/title" . }}</h1>
     {{ partial "page-metadata" . }}

layouts/_default/taxonomy.html

@@ -1,4 +1,5 @@
 {{ define "main" }}
+  <div id="main-content" tabindex="-1">
   {{ range .Paginator.Pages }}
     <article class="gdoc-post">
       <header class="gdoc-post__header">
@@ -31,6 +32,7 @@
       </footer>
     </article>
   {{ end }}
+  </div>
   {{ partial "pagination.html" . }}
 {{ end }}
 

layouts/_default/terms.html

@@ -1,4 +1,5 @@
 {{ define "main" }}
+  <div id="main-content" tabindex="-1">
   {{ range .Paginator.Pages.ByTitle }}
     <article class="gdoc-post">
       <header class="gdoc-post__header">
@@ -28,5 +29,6 @@
       </footer>
     </article>
   {{ end }}
+  </div>
   {{ partial "pagination.html" . }}
 {{ end }}

layouts/partials/foot.html

@@ -1,6 +0,0 @@
-{{ if default true .Site.Params.geekdocSearch }}
-  <script defer src="{{ index (index .Site.Data.assets "search.js") "src" | relURL }}"></script>
-  {{- $searchConfigFile := printf "search/%s.config.json" .Language.Lang -}}
-  {{- $searchConfig := resources.Get "search/config.json" | resources.ExecuteAsTemplate $searchConfigFile . | resources.Minify -}}
-  {{- $searchConfig.Publish -}}
-{{ end }}

layouts/partials/head/custom.html

@@ -1 +1,9 @@
-<!-- You can add custom elements to the page header here. -->
+<!--
+You can add custom elements to the page header here.
+
+Example:
+Ensure to use the absolute path to custom files and place the source files in the `static` folder.
+
+<link rel="stylesheet" type="text/css" href="/custom.css">
+<script type="text/javascript" src="/custom.js"></script>
+-->

layouts/partials/language.html

@@ -1,6 +1,6 @@
 {{ if hugo.IsMultilingual }}
   <span class="gdoc-language">
-    <ul class="gdoc-language__selector" role="button" aria-pressed="false" tabindex="0">
+    <ul class="gdoc-language__selector" tabindex="0" role="button" aria-pressed="false">
       <li>
         {{ range .Site.Languages }}
           {{ if eq . $.Site.Language }}

layouts/partials/menu-bundle.html

@@ -60,6 +60,9 @@
                   class="gdoc-nav__entry{{- if not .external }}
                     {{- if $isCurrent }}{{ printf " is-active" }}{{ end }}
                   {{- end }}"
+                  {{ if .rel -}}
+                    rel="{{ .rel }}"
+                  {{- end }}
                 >
                   {{ $name }}
                 </a>

layouts/partials/menu-extra.html

@@ -33,6 +33,9 @@
               {{ relref $current .ref }}
             {{- end }}"
             class="gdoc-header__link"
+            {{ if .rel -}}
+              rel="{{ .rel }}"
+            {{- end }}
           >
             <svg class="gdoc-icon {{ .icon }}">
               <title>{{ $name }}</title>

layouts/partials/microformats/schema.html

@@ -60,7 +60,7 @@
           "url": {{ .Site.Home.Permalink }},
           "logo": {
               "@type": "ImageObject",
-              "url": {{ (default "brand.svg" .Site.Params.logo) | absURL }},
+              "url": {{ (default "brand.svg" .Site.Params.geekdocLogo) | absURL }},
               "width":"32",
               "height":"32"
           }

layouts/partials/page-header.html

@@ -48,6 +48,7 @@
         <svg class="gdoc-icon gdoc_code"><use xlink:href="#gdoc_code"></use></svg>
         <a
           href="{{ $geekdocRepo }}/{{ path.Join $geekdocEditPath ($.Scratch.Get "geekdocFilePath") }}"
+          rel="edit"
         >
           {{ i18n "edit_page" }}
         </a>

layouts/partials/search.html

@@ -1,4 +1,9 @@
 {{ if default true .Site.Params.geekdocSearch }}
+  <script defer src="{{ index (index .Site.Data.assets "search.js") "src" | relURL }}"></script>
+  {{- $searchConfigFile := printf "search/%s.config.json" .Language.Lang -}}
+  {{- $searchConfig := resources.Get "search/config.json" | resources.ExecuteAsTemplate $searchConfigFile . | resources.Minify -}}
+  {{- $searchConfig.Publish -}}
+
   <div class="gdoc-search flex align-center">
     <svg class="gdoc-icon gdoc_search"><use xlink:href="#gdoc_search"></use></svg>
     <input

layouts/partials/site-header.html

@@ -1,37 +1,44 @@
 <header class="gdoc-header">
   <div class="container flex align-center justify-between">
     {{ if .MenuEnabled }}
-      <label for="menu-control" class="gdoc-nav__control" tabindex="0">
+      <label for="menu-control" class="gdoc-nav__control">
-        <svg class="gdoc-icon gdoc_menu">
+        <div tabindex="0" role="button" aria-pressed="false">
-          <title>{{ i18n "button_nav_open" }}</title>
+          <input type="checkbox" class="hidden" id="menu-control" />
-          <use xlink:href="#gdoc_menu"></use>
+
-        </svg>
+          <svg class="gdoc-icon gdoc_menu">
-        <svg class="gdoc-icon gdoc_arrow_back">
+            <title>{{ i18n "button_nav_open" }}</title>
-          <title>{{ i18n "button_nav_close" }}</title>
+            <use xlink:href="#gdoc_menu"></use>
-          <use xlink:href="#gdoc_arrow_back"></use>
+          </svg>
-        </svg>
+          <svg class="gdoc-icon gdoc_arrow_back">
+            <title>{{ i18n "button_nav_close" }}</title>
+            <use xlink:href="#gdoc_arrow_back"></use>
+          </svg>
+        </div>
       </label>
     {{ end }}
     <div>
-      <a class="gdoc-brand gdoc-header__link" href="{{ .Root.Site.Home.Permalink }}">
+      <a class="gdoc-brand gdoc-header__link flex gap-16 align-center" href="{{ .Root.Site.Home.Permalink }}">
-        <span class="flex align-center">
+        <img
-          <img
+          class="gdoc-brand__img"
-            class="gdoc-brand__img"
+          src="{{ (default "brand.svg" .Root.Site.Params.geekdocLogo) | relURL }}"
-            src="{{ (default "brand.svg" .Root.Site.Params.geekdocLogo) | relURL }}"
+          alt=""
-            alt=""
+        />
-          />
+        <div>
-          <span class="gdoc-brand__title">{{ .Root.Site.Title }}</span>
+          <div class="gdoc-brand__title">{{ .Root.Site.Title }}</div>
-        </span>
+          {{ with .Root.Site.Params.geekdocSubtitle }}
+          <div class="gdoc-brand__subtitle">{{ . }}</div>
+          {{ end }}
+        </div>
       </a>
     </div>
-    <div class="gdoc-menu-header">
+    <div class="gdoc-menu-header flex gap-16">
       <span class="gdoc-menu-header__items">
         {{ if .Root.Site.Data.menu.extra.header }}
           {{ partial "menu-extra" (dict "current" .Root "source" .Root.Site.Data.menu.extra.header "target" "header") }}
         {{ end }}
 
 
-        <span id="gdoc-color-theme">
+        <span id="gdoc-color-theme" tabindex="0" role="button" aria-pressed="false">
           <svg class="gdoc-icon gdoc_brightness_dark">
             <title>{{ i18n "button_toggle_dark" }}</title>
             <use xlink:href="#gdoc_brightness_dark"></use>
@@ -56,23 +63,24 @@
         </span>
 
         {{ partial "language" .Root }}
+      </span>
+      <span class="gdoc-menu-header__control">
+        <label for="menu-header-control">
+          <div tabindex="0" role="button" aria-pressed="false">
+            <input type="checkbox" class="hidden" id="menu-header-control" />
 
-
-        <span class="gdoc-menu-header__control">
-          <label for="menu-header-control">
             <svg class="gdoc-icon gdoc_keyboard_arrow_right">
               <use xlink:href="#gdoc_keyboard_arrow_right"></use>
               <title>{{ i18n "button_menu_close" }}</title>
             </svg>
-          </label>
+
-        </span>
+            <svg class="gdoc-icon gdoc_keyboard_arrow_left">
+              <use xlink:href="#gdoc_keyboard_arrow_left"></use>
+              <title>{{ i18n "button_menu_open" }}</title>
+            </svg>
+          </div>
+        </label>
       </span>
-      <label for="menu-header-control" class="gdoc-menu-header__control">
-        <svg class="gdoc-icon gdoc_keyboard_arrow_left">
-          <use xlink:href="#gdoc_keyboard_arrow_left"></use>
-          <title>{{ i18n "button_menu_open" }}</title>
-        </svg>
-      </label>
     </div>
   </div>
 </header>

layouts/posts/list.html

@@ -1,4 +1,5 @@
 {{ define "main" }}
+  <div id="main-content" tabindex="-1">
   {{ range .Paginator.Pages }}
     <article class="gdoc-markdown gdoc-post">
       <header class="gdoc-post__header">
@@ -29,6 +30,7 @@
       </footer>
     </article>
   {{ end }}
+  </div>
   {{ partial "pagination.html" . }}
 {{ end }}
 

layouts/posts/single.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <article class="gdoc-post">
+  <article class="gdoc-post" id="main-content" tabindex="-1">
     <header class="gdoc-post__header">
       <h1 class="gdoc-post__title">{{ partial "utils/title" . }}</h1>
       <div class="flex flex-wrap align-center gdoc-post__meta gdoc-post__meta--head">

layouts/shortcodes/audio.html

@@ -0,0 +1,23 @@
+{{- $source := ($.Page.Resources.ByType "audio").GetMatch (printf "%s" (.Get "name")) }}
+{{- $customAlt := .Get "alt" }}
+
+
+{{- with $source }}
+  {{- $caption := default .Title $customAlt }}
+
+  <div class="flex justify-center">
+    <figure class="gdoc-markdown__figure">
+      <audio controls class="player" preload="auto">
+        <source src="{{ .Permalink }}" type="audio/mpeg">
+      </audio>
+      {{- with $caption }}
+        <figcaption>
+          {{ . }}
+          {{- with $source.Params.credits }}
+            {{ printf " (%s)" . | $.Page.RenderString }}
+          {{- end }}
+        </figcaption>
+      {{- end }}
+    </figure>
+  </div>
+{{- end }}

layouts/shortcodes/columns.html

@@ -5,7 +5,7 @@
 {{- end }}
 
 
-<div class="gdoc-columns gdoc-columns--{{ $size }} flex flex-gap flex-mobile-column">
+<div class="gdoc-columns gdoc-columns--{{ $size }} flex gap-16 flex-mobile-column">
   {{- range split .Inner "<--->" }}
     <div class="gdoc-columns__content gdoc-markdown--nested flex-even">
       {{ . | $.Page.RenderString -}}

layouts/shortcodes/gist.html

@@ -0,0 +1 @@
+<script src="https://gist.github.com/{{ index .Params 0 }}/{{ index .Params 1 }}.js{{if len .Params | eq 3 }}?file={{ index .Params 2 }}{{end}}"></script>

layouts/shortcodes/hint.html

@@ -1,15 +1,16 @@
-{{ $type := default "note" (.Get "type") }}
+{{- $type := default "note" (.Get "type") }}
-{{ $icon := .Get "icon" }}
+{{- $icon := .Get "icon" }}
-{{ $title := default ($type | title) (.Get "title") }}
+{{- $title := default ($type | title) (.Get "title") }}
 
 
 <blockquote class="gdoc-hint {{ $type | lower }}">
-  <div class="gdoc-hint__title flex align-center">
+  <div class="gdoc-hint__title flex gap-8 align-center">
     {{- with $icon -}}
       <svg class="gdoc-icon {{ . }}"><use xlink:href="#{{ . }}"></use></svg>
       <span>{{ $title }}</span>
     {{- else -}}
-      <i class="fa {{ $type | lower }}" title="{{ $title }}"></i>
+      <i class="fa {{ $type | lower }}"></i>
+      <span>{{ $title }}</span>
     {{- end -}}
   </div>
   <div class="gdoc-hint__text">{{ .Inner | $.Page.RenderString }}</div>

layouts/shortcodes/progress.html

@@ -1,4 +1,5 @@
 {{- $value := default 0 (.Get "value") -}}
+{{- $type := default "main" (.Get "type") }}
 {{- $title := .Get "title" -}}
 {{- $icon := .Get "icon" -}}
 
@@ -15,7 +16,7 @@
   </div>
   <div class="gdoc-progress__wrap">
     <div
-      class="gdoc-progress__bar"
+      class="gdoc-progress__bar {{ $type | lower }}"
       data-percent="{{ $value }}"
       style="width: {{ $value }}%;"
     ></div>

package.json

@@ -34,39 +34,39 @@
     "node": ">=18 <=22"
   },
   "dependencies": {
-    "@cfworker/json-schema": "4.1.0",
+    "@cfworker/json-schema": "4.1.1",
     "clipboard": "2.0.11",
-    "flexsearch": "0.7.43",
+    "flexsearch": "0.8.205",
-    "katex": "0.16.20",
+    "katex": "0.16.22",
     "lodash": "4.17.21",
-    "mermaid": "11.4.1",
+    "mermaid": "11.9.0",
     "store2": "2.14.4",
-    "uuid": "11.0.5"
+    "uuid": "11.1.0"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "7.26.5",
+    "@babel/eslint-parser": "7.28.0",
-    "autoprefixer": "10.4.20",
+    "autoprefixer": "10.4.21",
-    "copy-webpack-plugin": "12.0.2",
+    "copy-webpack-plugin": "13.0.0",
     "css-loader": "7.1.2",
-    "eslint": "9.18.0",
+    "eslint": "9.31.0",
-    "eslint-config-prettier": "10.0.1",
+    "eslint-config-prettier": "10.1.8",
-    "eslint-plugin-prettier": "5.2.1",
+    "eslint-plugin-prettier": "5.5.3",
     "favicons": "7.2.0",
     "favicons-webpack-plugin": "6.0.1",
-    "globals": "15.14.0",
+    "globals": "16.3.0",
-    "html-validate": "9.1.3",
+    "html-validate": "9.7.1",
-    "npm-run-all2": "7.0.2",
+    "npm-run-all2": "8.0.4",
     "postcss-loader": "8.1.1",
-    "prettier": "3.4.2",
+    "prettier": "3.6.2",
-    "sass": "1.83.1",
+    "sass": "1.89.2",
-    "sass-loader": "16.0.4",
+    "sass-loader": "16.0.5",
-    "shx": "0.3.4",
+    "shx": "0.4.0",
     "svg-sprite": "2.0.4",
-    "svgtofont": "6.2.0",
+    "svgtofont": "6.3.2",
-    "webpack": "5.97.1",
+    "webpack": "5.100.2",
     "webpack-cli": "6.0.1",
-    "webpack-manifest-plugin": "5.0.0",
+    "webpack-manifest-plugin": "5.0.1",
-    "webpack-remove-empty-scripts": "1.0.4"
+    "webpack-remove-empty-scripts": "1.1.1"
   },
   "overrides": {
     "colors": "1.4.0"

src/js/accessibility.js

@@ -0,0 +1,53 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const gdocNav = document.querySelector(".gdoc-nav")
+  const gdocPage = document.querySelector(".gdoc-page")
+  const menuControl = document.getElementById("menu-control")
+
+  // Helper function for menu navigation accessibility
+  function updateMenuAccessibility() {
+    if (!gdocNav || !gdocPage || !menuControl) return
+
+    const isMenuOpen = menuControl.checked
+    const isDesktop = window.matchMedia("(min-width: 41rem)").matches
+
+    // Set nav accessibility attributes
+    gdocNav.toggleAttribute("inert", !isDesktop && !isMenuOpen)
+    gdocNav.setAttribute("aria-hidden", (!isDesktop && !isMenuOpen).toString())
+
+    // Set page accessibility attributes
+    gdocPage.toggleAttribute("inert", !isDesktop && isMenuOpen)
+    gdocPage.setAttribute("aria-hidden", (!isDesktop && isMenuOpen).toString())
+  }
+
+  // Process all button role elements
+  document.querySelectorAll('[role="button"]').forEach((buttonElement) => {
+    const controlId = buttonElement.parentElement?.getAttribute("for")
+    if (!controlId) return
+
+    const controlElement = document.getElementById(controlId)
+    if (!controlElement || controlElement.type !== "checkbox") return
+
+    // Set initial accessibility state
+    buttonElement.setAttribute("aria-pressed", controlElement.checked)
+
+    // Handle accessibility updates
+    const updateButton = () => {
+      buttonElement.setAttribute("aria-pressed", controlElement.checked)
+      if (controlId === "menu-control") updateMenuAccessibility()
+    }
+
+    // Event listeners
+    buttonElement.addEventListener("click", updateButton)
+    buttonElement.addEventListener("keydown", (event) => {
+      if (event.key === "Enter") {
+        controlElement.checked = !controlElement.checked
+        updateButton()
+        event.preventDefault()
+      }
+    })
+  })
+
+  // Initial call and resize handler
+  updateMenuAccessibility()
+  window.addEventListener("resize", updateMenuAccessibility)
+})

src/js/colorTheme.js

@@ -7,7 +7,7 @@ import { TOGGLE_COLOR_THEMES, THEME, COLOR_THEME_AUTO } from "./config.js"
 document.addEventListener("DOMContentLoaded", () => {
   const colorThemeToggle = document.getElementById("gdoc-color-theme")
 
-  colorThemeToggle.onclick = function () {
+  function toggleColorTheme() {
     let lstore = Storage.namespace(THEME)
     let currentColorTheme = lstore.get("color-theme") || COLOR_THEME_AUTO
     let nextColorTheme = toggle(TOGGLE_COLOR_THEMES, currentColorTheme)
@@ -15,6 +15,17 @@ document.addEventListener("DOMContentLoaded", () => {
     lstore.set("color-theme", TOGGLE_COLOR_THEMES[nextColorTheme])
     applyTheme(false)
   }
+
+  colorThemeToggle.onclick = function () {
+    toggleColorTheme()
+  }
+
+  colorThemeToggle.addEventListener("keydown", function (event) {
+    if (event.key === "Enter") {
+      toggleColorTheme()
+      event.preventDefault()
+    }
+  })
 })
 
 function applyTheme(init = true) {

src/js/index.js

@@ -1,4 +1,5 @@
 import Clipboard from "clipboard"
+import "./accessibility.js"
 
 document.addEventListener("DOMContentLoaded", function () {
   let clipboard = new Clipboard(".clip")

src/js/search.js

@@ -1,6 +1,6 @@
 import groupBy from "lodash/groupBy.js"
 import truncate from "lodash/truncate.js"
-import Document from "flexsearch/dist/module/document.js"
+import { Document, Charset } from "flexsearch"
 import { Validator } from "@cfworker/json-schema"
 
 document.addEventListener("DOMContentLoaded", function () {
@@ -55,7 +55,8 @@ function init(input, searchConfig) {
   input.removeEventListener("focus", init)
 
   const indexCfgDefaults = {
-    tokenize: "forward"
+    tokenize: "forward",
+    encoder: Charset.LatinBalance
   }
   const indexCfg = searchConfig.indexConfig ? searchConfig.indexConfig : indexCfgDefaults
   const dataUrl = searchConfig.dataFile
@@ -63,7 +64,7 @@ function init(input, searchConfig) {
   indexCfg.document = {
     key: "id",
     index: ["title", "content", "description"],
-    store: ["title", "href", "parent", "description"]
+    store: ["title", "href", "parent", "content", "description"]
   }
 
   const index = new Document(indexCfg)
@@ -79,7 +80,14 @@ function init(input, searchConfig) {
 function search(input, results, searchConfig) {
   const searchCfg = {
     enrich: true,
-    limit: 5
+    limit: 5,
+    highlight: {
+      template: "<b>$1</b>",
+      boundary: {
+        before: 10,
+        after: 20
+      }
+    }
   }
 
   while (results.firstChild) {
@@ -157,10 +165,23 @@ function createLinks(pages, target, showDesc) {
     if (showDesc === true) {
       const desc = a.appendChild(document.createElement("span"))
       desc.classList.add("gdoc-search__entry--description")
-      desc.textContent = truncate(page.description, {
+
-        length: 55,
+      if (page.highlight) {
-        separator: " "
+        const parser = new DOMParser()
-      })
+        const doc = parser.parseFromString(
+          truncate(page.highlight, {
+            length: 55,
+            separator: " "
+          }),
+          "text/html"
+        )
+        desc.innerHTML = doc.body.innerHTML
+      } else {
+        desc.textContent = truncate(page.description, {
+          length: 55,
+          separator: " "
+        })
+      }
     }
 
     if (target) {
@@ -206,6 +227,11 @@ function flattenHits(results) {
     for (const page of field.result) {
       if (!map.has(page.doc.href)) {
         map.set(page.doc.href, true)
+
+        if (page.highlight) {
+          page.doc.highlight = page.highlight
+        }
+
         items.push(page.doc)
       }
     }

src/sass/_asciidoc.scss

@@ -1,18 +1,34 @@
+@use "sass:color";
+@use "defaults";
+
 .admonitionblock {
-  @each $name, $color in $hint-colors {
+  $root: &;
+
+  margin: defaults.$padding-16 0;
+  padding: 0;
+
+  border: defaults.$border-1 solid var(--accent-color);
+  border-left: defaults.$border-4 solid var(--accent-color);
+  border-radius: defaults.$border-radius;
+
+  @each $name, $color in defaults.$hint-colors {
     &.#{$name} {
-      border-left-color: $color;
+      border-color: $color;
-      background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
+      color: defaults.$body-font-color;
-      color: $body-font-color;
+
+      td.icon {
+        background-color: color.adjust($color, $alpha: -0.9);
+        border-start-start-radius: inherit;
+        border-start-end-radius: inherit;
+        position: relative;
+        z-index: -10;
+        outline: color.adjust($color, $alpha: -0.9);
+      }
     }
   }
 
-  & {
+  .table-wrap {
-    margin: $padding-16 0;
+    margin: 0;
-    padding: 0;
-
-    border-left: $border-4 solid var(--accent-color);
-    border-radius: $border-radius;
   }
 
   table {
@@ -25,35 +41,41 @@
 
     td {
       display: block;
-      padding: $padding-4 $padding-16 !important;
+      padding: defaults.$padding-4 defaults.$padding-16 !important;
 
       &:first-child {
-        background-color: color.scale($gray-600, $alpha: -95%);
+        background-color: color.scale(defaults.$gray-600, $alpha: -95%);
         font-weight: bold;
 
         &.icon {
-          .title {
+          margin-left: -5px;
-            display: flex;
-            align-items: center;
-          }
 
-          i.fa::after {
+          @each $name, $icon in defaults.$hint-icons {
-            content: attr(title);
-            font-style: normal;
-            padding-left: $padding-24;
-          }
-
-          i.fa {
-            color: $black;
-            background-size: auto 90%;
-            background-repeat: no-repeat;
-            filter: invert(30%);
-            margin-left: -5px;
-          }
-
-          @each $name, $icon in $hint-icons {
             i.fa.icon-#{$name} {
-              background-image: url(img/geekdoc-stack.svg##{$icon});
+              width: defaults.$font-size-24;
+              height: defaults.$font-size-24;
+              position: relative;
+
+              &::before {
+                content: "";
+                position: absolute;
+                left: 0;
+                top: 50%;
+                transform: translateY(-50%);
+                width: defaults.$font-size-24;
+                height: defaults.$font-size-24;
+                mask-image: url(img/geekdoc-stack.svg##{$icon});
+                mask-repeat: no-repeat;
+                mask-size: contain;
+                background-color: var(--body-font-color);
+              }
+
+              &::after {
+                color: var(--body-font-color);
+                content: attr(title);
+                font-style: normal;
+                padding-left: defaults.$padding-32;
+              }
             }
           }
         }

src/sass/_base.scss

@@ -1,42 +1,47 @@
+@use "sass:meta";
+@use "sass:map";
+@use "color_mode";
+@use "defaults";
+
 :root {
   --code-max-height: none;
 
-  --header-font-family: #{meta.inspect($header-font-family)};
+  --header-font-family: #{meta.inspect(defaults.$header-font-family)};
-  --body-font-family: #{meta.inspect($body-font-family)};
+  --body-font-family: #{meta.inspect(defaults.$body-font-family)};
-  --code-font-family: #{meta.inspect($code-font-family)};
+  --code-font-family: #{meta.inspect(defaults.$code-font-family)};
 }
 
 :root,
 :root[color-theme="light"] {
-  @include color_theme_light;
+  @include color_mode.color_theme_light;
-  @include code_theme_light;
+  @include color_mode.code_theme_light;
 }
 
 @media (prefers-color-scheme: light) {
   :root {
-    @include color_theme_light;
+    @include color_mode.color_theme_light;
-    @include code_theme_light;
+    @include color_mode.code_theme_light;
   }
 }
 
 :root[color-theme="dark"] {
-  @include color_theme_dark;
+  @include color_mode.color_theme_dark;
-  @include code_theme_dark;
+  @include color_mode.code_theme_dark;
 }
 
 :root[code-theme="dark"] {
-  @include code_theme_dark;
+  @include color_mode.code_theme_dark;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    @include color_theme_dark;
+    @include color_mode.color_theme_dark;
-    @include code_theme_dark;
+    @include color_mode.code_theme_dark;
   }
 }
 
 html {
-  font-size: $font-size-base;
+  font-size: defaults.$font-size-base;
   letter-spacing: 0.33px;
   scroll-behavior: smooth;
 
@@ -87,7 +92,7 @@ html {
 
 html,
 body {
-  min-width: $body-min-width;
+  min-width: defaults.$body-min-width;
   overflow-x: hidden;
 }
 
@@ -100,6 +105,24 @@ body {
   * {
     box-sizing: inherit;
   }
+
+  #gdoc-to-main {
+    position: absolute;
+    margin: defaults.$padding-8 0;
+    padding: defaults.$padding-8;
+
+    display: inline-block;
+    background-color: var(--accent-color-lite);
+    border-radius: defaults.$border-radius;
+    border: defaults.$border-1 solid var(--accent-color);
+
+    transform: translateY(0);
+    transition: transform 250ms ease-in;
+
+    &:not(:focus) {
+      transform: translateY(-#{defaults.$padding-64});
+    }
+  }
 }
 
 h1,
@@ -108,7 +131,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-weight: $body-font-weight;
+  font-weight: defaults.$body-font-weight;
   display: flex;
   align-items: center;
 }
@@ -116,7 +139,7 @@ h6 {
 h4,
 h5,
 h6 {
-  font-size: $font-size-16 !important;
+  font-size: defaults.$font-size-16 !important;
 }
 
 a {
@@ -161,20 +184,20 @@ img {
   color: var(--body-font-color);
   background: var(--body-background);
 
-  font-weight: $body-font-weight;
+  font-weight: defaults.$body-font-weight;
 }
 
 .container {
   width: 100%;
-  max-width: $container-max-width;
+  max-width: defaults.$container-max-width;
   margin: 0 auto;
-  padding: $padding-20;
+  padding: defaults.$padding-20;
 }
 
 svg.gdoc-icon {
   display: inline-block;
-  width: $font-size-20;
+  width: defaults.$font-size-20;
-  height: $font-size-20;
+  height: defaults.$font-size-20;
   vertical-align: middle;
   stroke-width: 0;
   stroke: currentColor;
@@ -197,19 +220,24 @@ svg.gdoc-icon {
   }
 
   svg.gdoc-icon {
-    width: $font-size-32;
+    width: defaults.$font-size-32;
-    height: $font-size-32;
+    height: defaults.$font-size-32;
   }
 }
 
 .gdoc-brand {
-  font-size: $font-size-32;
-  line-height: $font-size-32;
-
   &__img {
-    margin-right: $padding-16;
+    width: defaults.$padding-32;
-    width: $padding-32;
+    height: defaults.$padding-32;
-    height: $padding-32;
+  }
+
+  &__title {
+    font-size: defaults.$font-size-24;
+    line-height: defaults.$font-size-24;
+  }
+
+  &__subtitle {
+    font-size: defaults.$font-size-12;
   }
 }
 
@@ -218,7 +246,7 @@ svg.gdoc-icon {
     display: flex;
 
     > span {
-      margin-left: $padding-8;
+      margin-left: defaults.$padding-8;
     }
   }
 
@@ -233,18 +261,18 @@ svg.gdoc-icon {
 }
 
 .gdoc-nav {
-  flex: 0 0 $menu-width;
+  flex: 0 0 defaults.$menu-width;
 
   nav {
-    width: $menu-width;
+    width: defaults.$menu-width;
-    padding: $padding-16 $padding-32 $padding-16 0;
+    padding: defaults.$padding-16 defaults.$padding-32 defaults.$padding-16 0;
 
     > ul > li > * {
       font-weight: normal;
     }
 
     section {
-      margin-top: $padding-32;
+      margin-top: defaults.$padding-32;
     }
   }
 
@@ -267,22 +295,22 @@ svg.gdoc-icon {
   }
 
   &__list {
-    padding-left: $padding-16;
+    padding-left: defaults.$padding-16;
     margin: 0;
     padding: 0;
     list-style: none;
     user-select: none;
 
     ul {
-      padding-left: $padding-16;
+      padding-left: defaults.$padding-16;
     }
 
     li {
-      margin: $padding-12 0;
+      margin: defaults.$padding-12 0;
     }
 
     svg.gdoc-icon {
-      margin-right: $padding-4;
+      margin-right: defaults.$padding-4;
     }
   }
 
@@ -293,8 +321,8 @@ svg.gdoc-icon {
       cursor: pointer;
 
       svg.gdoc-icon.toggle {
-        width: $font-size-16;
+        width: defaults.$font-size-16;
-        height: $font-size-16;
+        height: defaults.$font-size-16;
       }
     }
 
@@ -347,22 +375,22 @@ svg.gdoc-icon {
 .gdoc-search__list,
 .gdoc-language__list {
   background: var(--body-background);
-  border-radius: $border-radius;
+  border-radius: defaults.$border-radius;
   box-shadow:
-    0 1px 3px 0 var(--accent-color-dark),
+    0 1px 3px 0 var(--accent-color),
-    0 1px 2px 0 var(--accent-color);
+    0 1px 2px 0 var(--accent-color-lite);
   position: absolute;
   margin: 0;
-  padding: $padding-8 $padding-4 !important;
+  padding: defaults.$padding-8 defaults.$padding-4 !important;
   list-style: none;
-  top: calc(100% + #{$padding-8});
+  top: calc(100% + #{defaults.$padding-8});
   z-index: 2;
 }
 
 .gdoc-page {
-  min-width: calc($body-min-width - $padding-32);
+  min-width: calc(defaults.$body-min-width - defaults.$padding-32);
   flex-grow: 1;
-  padding: $padding-16 0;
+  padding: defaults.$padding-16 0;
 
   h1,
   h2,
@@ -375,7 +403,7 @@ svg.gdoc-icon {
 
   &__header,
   &__footer {
-    margin-bottom: $padding-24;
+    margin-bottom: defaults.$padding-24;
 
     svg.gdoc-icon {
       color: var(--control-icons);
@@ -389,8 +417,8 @@ svg.gdoc-icon {
 
   &__header {
     background: var(--accent-color-lite);
-    padding: $padding-8 $padding-16;
+    padding: defaults.$padding-8 defaults.$padding-16;
-    border-radius: $border-radius;
+    border-radius: defaults.$border-radius;
   }
 
   &__nav {
@@ -415,6 +443,7 @@ svg.gdoc-icon {
       width: 1.85em;
       height: 1.85em;
       color: transparent;
+      transition: color 0.2s ease-in-out;
     }
 
     &:focus {
@@ -425,7 +454,7 @@ svg.gdoc-icon {
   }
 
   &__footer {
-    margin-top: $padding-32;
+    margin-top: defaults.$padding-32;
 
     a:hover {
       text-decoration: none;
@@ -435,8 +464,8 @@ svg.gdoc-icon {
 
 .gdoc-post {
   word-wrap: break-word;
-  border-top: 1px dashed $gray-600;
+  border-top: 1px dashed defaults.$gray-600;
-  padding: $padding-32 0;
+  padding: defaults.$padding-32 0;
 
   &:first-of-type {
     padding-top: 0;
@@ -469,7 +498,7 @@ svg.gdoc-icon {
   }
 
   &__readmore {
-    margin: $padding-32 0;
+    margin: defaults.$padding-32 0;
 
     a,
     a:hover,
@@ -485,22 +514,22 @@ svg.gdoc-icon {
     }
 
     > span {
-      margin: $padding-4 0;
+      margin: defaults.$padding-4 0;
       &:not(:last-child) {
-        margin-right: $padding-8;
+        margin-right: defaults.$padding-8;
       }
     }
 
     svg.gdoc-icon {
-      font-size: $font-size-20;
+      font-size: defaults.$font-size-20;
     }
 
     .gdoc-button {
-      margin: 0 $padding-2 0 0;
+      margin: 0 defaults.$padding-2 0 0;
     }
 
     &--head {
-      margin-bottom: $padding-32;
+      margin-bottom: defaults.$padding-32;
     }
   }
 
@@ -508,26 +537,34 @@ svg.gdoc-icon {
     position: relative;
 
     &:hover > .gdoc-post__codecopy {
+      opacity: 1;
       visibility: visible;
+      pointer-events: auto;
     }
   }
 
   &__codecopy {
+    opacity: 0;
     visibility: hidden;
-    position: absolute;
+    transition:
-    top: $padding-8;
+      opacity 0.2s ease,
-    right: $padding-8;
+      visibility 0.2s ease;
+    pointer-events: none;
 
-    border: $border-2 solid var(--code-copy-border-color);
+    position: absolute;
-    border-radius: $border-radius;
+    top: defaults.$padding-8;
+    right: defaults.$padding-8;
+
+    border: defaults.$border-2 solid var(--code-copy-border-color);
+    border-radius: defaults.$border-radius;
     background: var(--code-copy-background);
-    width: $padding-32;
+    width: defaults.$padding-32;
-    height: $padding-32;
+    height: defaults.$padding-32;
 
     svg.gdoc-icon {
       top: 0;
-      width: $font-size-20;
+      width: defaults.$font-size-20;
-      height: $font-size-20;
+      height: defaults.$font-size-20;
       color: var(--code-copy-font-color);
     }
 
@@ -562,10 +599,10 @@ svg.gdoc-icon {
   }
 
   &__item {
-    line-height: $padding-32;
+    line-height: defaults.$padding-32;
 
     &--row {
-      margin-right: $padding-16;
+      margin-right: defaults.$padding-16;
     }
   }
 
@@ -573,6 +610,10 @@ svg.gdoc-icon {
     text-decoration: underline;
     color: var(--footer-link-color);
 
+    &:hover {
+      text-decoration: none;
+    }
+
     &:visited {
       color: var(--footer-link-color-visited);
     }
@@ -584,10 +625,10 @@ svg.gdoc-icon {
 
   svg.gdoc-icon {
     position: absolute;
-    left: $padding-8;
+    left: defaults.$padding-8;
     color: var(--control-icons);
-    width: $font-size-20;
+    width: defaults.$font-size-20;
-    height: $font-size-20;
+    height: defaults.$font-size-20;
   }
 
   &::after {
@@ -598,14 +639,14 @@ svg.gdoc-icon {
 
   &__input {
     width: 100%;
-    padding: $padding-8;
+    padding: defaults.$padding-8;
-    padding-left: $padding-32;
+    padding-left: defaults.$padding-32;
 
     transition:
       border-color 0.15s ease-in-out,
       box-shadow 0.15s ease-in-out;
     border: 1px solid transparent;
-    border-radius: $border-radius;
+    border-radius: defaults.$border-radius;
 
     background: var(--accent-color-lite);
     color: var(--body-font-color);
@@ -631,26 +672,26 @@ svg.gdoc-icon {
     }
 
     > li + li {
-      margin-top: $padding-4;
+      margin-top: defaults.$padding-4;
     }
 
     svg.gdoc-icon {
-      margin-right: $padding-4;
+      margin-right: defaults.$padding-4;
     }
   }
 
   &__section {
     display: flex;
     flex-direction: column;
-    padding: $padding-4 !important;
+    padding: defaults.$padding-4 !important;
   }
 
   &__entry {
     display: flex;
     flex-direction: column;
     color: var(--body-font-color);
-    padding: $padding-4 !important;
+    padding: defaults.$padding-4 !important;
-    border-radius: $border-radius;
+    border-radius: defaults.$border-radius;
 
     &:hover,
     &.is-active {
@@ -668,7 +709,7 @@ svg.gdoc-icon {
     }
 
     &--description {
-      font-size: $font-size-14;
+      font-size: defaults.$font-size-14;
       font-style: italic;
     }
   }
@@ -707,7 +748,7 @@ svg.gdoc-icon {
 }
 
 .gdoc-paging {
-  padding: $padding-16 0;
+  padding: defaults.$padding-16 0;
 
   &__item {
     flex: 1 1 0;
@@ -719,7 +760,7 @@ svg.gdoc-icon {
     a:hover,
     a:visited:hover {
       background: var(--link-color);
-      color: $gray-100;
+      color: defaults.$gray-100;
     }
 
     &--next {
@@ -733,13 +774,13 @@ svg.gdoc-icon {
 }
 
 .gdoc-error {
-  padding: $padding-96 $padding-16;
+  padding: defaults.$padding-96 defaults.$padding-16;
   margin: 0 auto;
   max-width: 45em;
 
   svg.gdoc-icon {
-    width: $font-size-128;
+    width: defaults.$font-size-128;
-    height: $font-size-128;
+    height: defaults.$font-size-128;
     color: var(--body-font-color);
   }
 
@@ -750,15 +791,15 @@ svg.gdoc-icon {
   }
 
   &__message {
-    padding-left: $padding-64;
+    padding-left: defaults.$padding-64;
   }
 
   &__line {
-    padding: $padding-8 0;
+    padding: defaults.$padding-8 0;
   }
 
   &__title {
-    font-size: $font-size-64;
+    font-size: defaults.$font-size-64;
   }
 
   &__code {
@@ -767,10 +808,10 @@ svg.gdoc-icon {
 }
 
 .gdoc-toc {
-  margin: $padding-16 0;
+  margin: defaults.$padding-16 0;
 
   li {
-    margin: $padding-4 0;
+    margin: defaults.$padding-4 0;
   }
 
   // Classes to hide nested levels of ToC/Menu

src/sass/_chroma_base.scss

@@ -1,3 +1,5 @@
+@use "defaults";
+
 @mixin chroma_base {
   .chroma {
     color: var(--code-font-color);
@@ -18,8 +20,7 @@
 
   /* LineTable */
   .chroma .lntable {
-    border: $border-1 solid var(--code-accent-color);
+    border-radius: defaults.$border-radius;
-    border-radius: $border-radius;
     border-spacing: 0;
     padding: 0;
     margin: 0;
@@ -37,7 +38,7 @@
   .chroma .lntable td:first-child {
     code {
       background-color: var(--code-accent-color-lite);
-      border-right: $border-1 solid var(--code-accent-color);
+      font-size: defaults.$font-size-12;
       padding-left: 0;
       padding-right: 0;
       border-radius: 0;
@@ -45,6 +46,6 @@
   }
   .chroma .lntable td:nth-child(2) {
     width: 100%;
-    margin-left: $padding-32;
+    margin-left: defaults.$padding-32;
   }
 }

src/sass/_chroma_dark.scss

@@ -1,7 +1,9 @@
+@use "chroma_base";
+
 @mixin chroma_dark {
   /* Theme: Dracula */
   /* Background */
-  @include chroma_base;
+  @include chroma_base.chroma_base;
 
   /* Other */
   .chroma .x {

src/sass/_chroma_light.scss

@@ -1,7 +1,9 @@
+@use "chroma_base";
+
 @mixin chroma_github {
   /* Theme: GitHub */
   /* Background */
-  @include chroma_base;
+  @include chroma_base.chroma_base;
 
   /* Other */
   .chroma .x {

src/sass/_color_mode.scss

@@ -1,31 +1,33 @@
+@use "sass:color";
+@use "sass:map";
+@use "chroma_dark";
+@use "chroma_light";
+@use "defaults";
+
 @mixin color_theme_light {
-  --header-background: #{$main-color};
+  --header-background: #{defaults.$main-color};
-  --header-font-color: #{$white};
+  --header-font-color: #{defaults.$white};
 
-  --body-background: #{$body-background};
+  --body-background: #{defaults.$body-background};
-  --body-font-color: #{$body-font-color};
+  --body-font-color: #{defaults.$body-font-color};
 
-  --mark-color: #{$mark-color};
+  --mark-color: #{defaults.$mark-color};
 
-  --button-background: #{color.scale($main-color, $lightness: 15%)};
+  --button-background: #{color.scale(defaults.$main-color, $lightness: 15%)};
-  --button-border-color: #{$main-color};
+  --button-border-color: #{defaults.$main-color};
 
-  --link-color: #{$link-color};
+  --link-color: #{defaults.$link-color};
-  --link-color-visited: #{$link-color-visited};
+  --link-color-visited: #{defaults.$link-color-visited};
 
-  --hint-link-color: #{$link-color};
+  --accent-color: #{defaults.$gray-200};
-  --hint-link-color-visited: #{$link-color-visited};
+  --accent-color-lite: #{defaults.$gray-100};
 
-  --accent-color-dark: #{$gray-400};
+  --control-icons: #{color.scale(defaults.$body-font-color, $lightness: 40%)};
-  --accent-color: #{$gray-200};
-  --accent-color-lite: #{$gray-100};
 
-  --control-icons: #{color.scale($body-font-color, $lightness: 40%)};
+  --footer-background: #{defaults.$second-color};
-
+  --footer-font-color: #{defaults.$white};
-  --footer-background: #{$second-color};
+  --footer-link-color: #{defaults.$link-color-footer};
-  --footer-font-color: #{$white};
+  --footer-link-color-visited: #{defaults.$link-color-footer};
-  --footer-link-color: #{$link-color-footer};
-  --footer-link-color-visited: #{$link-color-footer};
 
   .dark-mode-dim .gdoc-markdown {
     img {
@@ -34,47 +36,37 @@
   }
 
   .gdoc-markdown {
-    .gdoc-hint,
     .gdoc-props__tag,
     .admonitionblock {
       filter: none;
     }
-
-    .gdoc-hint__title,
-    .admonitionblock table td:first-child {
-      background-color: color.scale($gray-600, $alpha: -95%);
-    }
   }
 }
 
 @mixin color_theme_dark {
-  --header-background: #{$main-color};
+  --header-background: #{defaults.$main-color};
-  --header-font-color: #{$white};
+  --header-font-color: #{defaults.$white};
 
-  --body-background: #{$body-background-dark};
+  --body-background: #{defaults.$body-background-dark};
-  --body-font-color: #{color.scale($body-background-dark, $lightness: 70%)};
+  --body-font-color: #{color.scale(defaults.$body-background-dark, $lightness: 70%)};
 
-  --mark-color: #{$mark-color};
+  --mark-color: #{defaults.$mark-color};
 
-  --button-background: #{color.scale($main-color, $lightness: 15%)};
+  --button-background: #{color.scale(defaults.$main-color, $lightness: 15%)};
-  --button-border-color: #{$main-color};
+  --button-border-color: #{defaults.$main-color};
 
-  --link-color: #{$link-color-dark};
+  --link-color: #{defaults.$link-color-dark};
-  --link-color-visited: #{$link-color-visited-dark};
+  --link-color-visited: #{defaults.$link-color-visited-dark};
 
-  --hint-link-color: #{$link-color};
+  --accent-color: #{color.scale(defaults.$body-background-dark, $lightness: -30%)};
-  --hint-link-color-visited: #{$link-color-visited};
+  --accent-color-lite: #{color.scale(defaults.$body-background-dark, $lightness: -15%)};
 
-  --accent-color-dark: #{color.scale($body-background-dark, $lightness: -60%)};
+  --control-icons: #{color.scale(defaults.$body-font-color, $lightness: 40%)};
-  --accent-color: #{color.scale($body-background-dark, $lightness: -30%)};
-  --accent-color-lite: #{color.scale($body-background-dark, $lightness: -15%)};
 
-  --control-icons: #{color.scale($body-font-color, $lightness: 40%)};
+  --footer-background: #{defaults.$second-color};
-
+  --footer-font-color: #{defaults.$white};
-  --footer-background: #{$second-color};
+  --footer-link-color: #{defaults.$link-color-footer};
-  --footer-font-color: #{$white};
+  --footer-link-color-visited: #{defaults.$link-color-footer};
-  --footer-link-color: #{$link-color-footer};
-  --footer-link-color-visited: #{$link-color-footer};
 
   .dark-mode-dim {
     .gdoc-markdown img {
@@ -83,58 +75,45 @@
   }
 
   .gdoc-markdown {
-    .gdoc-hint,
     .gdoc-props__tag,
     .admonitionblock {
       filter: saturate(2.5) brightness(0.85);
     }
 
-    .gdoc-hint,
+    .gdoc-progress__bar {
-    .admonitionblock {
+      filter: saturate(0.85) brightness(0.85);
-      a {
-        color: var(--hint-link-color);
-
-        &:visited {
-          color: var(--hint-link-color-visited);
-        }
-      }
-    }
-
-    .gdoc-hint__title,
-    .admonitionblock table td:first-child {
-      background-color: color.scale($gray-600, $alpha: -85%);
     }
   }
 }
 
 @mixin code_theme_dark {
-  @include chroma_dark;
+  @include chroma_dark.chroma_dark;
 
   & {
-    --code-background: #{$code-background-dark};
+    --code-background: #{defaults.$code-background-dark};
-    --code-accent-color: #{color.scale($code-background-dark, $lightness: -30%)};
+    --code-accent-color: #{color.scale(defaults.$code-background-dark, $lightness: -30%)};
-    --code-accent-color-lite: #{color.scale($code-background-dark, $lightness: -15%)};
+    --code-accent-color-lite: #{color.scale(defaults.$code-background-dark, $lightness: -15%)};
-    --code-font-color: #{$code-font-color-dark};
+    --code-font-color: #{defaults.$gray-300};
 
-    --code-copy-background: #{$code-background-dark};
+    --code-copy-background: #{defaults.$code-background-dark};
-    --code-copy-font-color: #{color.scale($code-font-color-dark, $lightness: -15%)};
+    --code-copy-font-color: #{color.scale(defaults.$code-font-color-dark, $lightness: -15%)};
-    --code-copy-border-color: #{color.scale($code-font-color-dark, $lightness: -20%)};
+    --code-copy-border-color: #{color.scale(defaults.$code-font-color-dark, $lightness: -20%)};
-    --code-copy-success-color: #{color.scale(map.get($hint-colors, "ok"), $alpha: -55%)};
+    --code-copy-success-color: #{color.scale(map.get(defaults.$hint-colors, "ok"), $alpha: -55%)};
   }
 }
 
 @mixin code_theme_light {
-  @include chroma_github;
+  @include chroma_light.chroma_github;
 
   & {
-    --code-background: #{$code-background};
+    --code-background: #{defaults.$code-background};
-    --code-accent-color: #{color.scale($code-background, $lightness: -45%)};
+    --code-accent-color: #{color.scale(defaults.$code-background, $lightness: -45%)};
-    --code-accent-color-lite: #{color.scale($code-background, $lightness: -15%)};
+    --code-accent-color-lite: #{color.scale(defaults.$code-background, $lightness: -15%)};
-    --code-font-color: #{$code-font-color};
+    --code-font-color: #{defaults.$gray-700};
 
-    --code-copy-background: #{$code-background};
+    --code-copy-background: #{defaults.$code-background};
-    --code-copy-font-color: #{color.scale($code-font-color, $lightness: 20%)};
+    --code-copy-font-color: #{defaults.$gray-500};
-    --code-copy-border-color: #{color.scale($code-font-color, $lightness: 40%)};
+    --code-copy-border-color: #{defaults.$gray-400};
-    --code-copy-success-color: #{map.get($hint-colors, "ok")};
+    --code-copy-success-color: #{map.get(defaults.$hint-colors, "ok")};
   }
 }

src/sass/_defaults.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Used in layout
 $padding-2: 0.125rem !default;
 $padding-4: 0.25rem !default;
@@ -26,19 +28,18 @@ $border-1: 1px !default;
 $border-2: 1.5px !default;
 $border-4: 3px !default;
 
-$border-radius: 0.15rem !default;
+$border-radius: 0.3rem !default;
 
 // Grayscale
 $white: rgba(255, 255, 255, 1) !default;
-$gray-100: rgba(248, 249, 250, 1) !default;
+$gray-100: rgba(244, 246, 247, 1) !default;
-$gray-200: rgba(233, 236, 239, 1) !default;
+$gray-200: rgba(217, 219, 221, 1) !default;
-$gray-300: rgba(222, 226, 230, 1) !default;
+$gray-300: rgba(189, 192, 195, 1) !default;
-$gray-400: rgba(206, 212, 218, 1) !default;
+$gray-400: rgba(162, 165, 169, 1) !default;
-$gray-500: rgba(173, 181, 189, 1) !default;
+$gray-500: rgba(134, 137, 142, 1) !default;
-$gray-600: rgba(134, 142, 150, 1) !default;
+$gray-600: rgba(107, 110, 116, 1) !default;
-$gray-700: rgba(73, 80, 87, 1) !default;
+$gray-700: rgba(79, 83, 90, 1) !default;
-$gray-800: rgba(52, 58, 64, 1) !default;
+$gray-800: rgba(52, 56, 64, 1) !default;
-$gray-900: rgba(33, 37, 41, 1) !default;
 $black: rgba(0, 0, 0, 1) !default;
 
 $link-color: rgba(10, 83, 154, 1) !default;
@@ -61,7 +62,7 @@ $main-color: rgba(32, 83, 117, 1) !default;
 $second-color: rgba(17, 43, 60, 1) !default;
 $mark-color: rgba(255, 171, 0, 1) !default;
 
-$body-background-dark: mix(invert($body-background, 75%), $second-color) !default;
+$body-background-dark: color.mix(color.invert($body-background, 75%), $second-color) !default;
 $body-font-color-dark: $gray-100 !default;
 
 $link-color-dark: rgba(110, 168, 212, 1) !default;

src/sass/_markdown.scss

@@ -1,3 +1,5 @@
+@use "defaults";
+
 .gdoc-markdown {
   line-height: 1.6rem;
 
@@ -10,8 +12,8 @@
     font-weight: 600;
 
     > code {
-      border-top: $border-4 solid var(--accent-color);
+      border-top: defaults.$border-4 solid var(--accent-color);
-      font-size: $font-size-12 !important;
+      font-size: defaults.$font-size-12 !important;
     }
   }
 
@@ -19,7 +21,7 @@
   h5,
   h6 {
     > code {
-      font-size: $font-size-14 !important;
+      font-size: defaults.$font-size-14 !important;
     }
   }
 
@@ -32,29 +34,29 @@
   a,
   &__link {
     text-decoration: underline;
-    border-bottom: $border-1 solid transparent;
+    border-bottom: defaults.$border-1 solid transparent;
     line-height: normal;
 
     &:hover {
-      text-decoration: underline;
+      text-decoration: none;
     }
   }
 
   &__link--raw {
     text-decoration: none !important;
-    color: $body-font-color !important;
+    color: defaults.$body-font-color !important;
 
     &:hover {
       text-decoration: none !important;
     }
 
     &:visited {
-      color: $body-font-color !important;
+      color: defaults.$body-font-color !important;
     }
   }
 
   &__link--code {
-    text-decoration: none;
+    text-decoration: underline;
     code {
       color: inherit !important;
     }
@@ -62,7 +64,7 @@
     &:hover {
       background: none;
       color: var(--link-color) !important;
-      text-decoration: underline;
+      text-decoration: none;
     }
 
     &:visited,
@@ -72,12 +74,12 @@
   }
 
   &__figure {
-    padding: $padding-4;
+    padding: defaults.$padding-4;
-    margin: $padding-16 0;
+    margin: defaults.$padding-16 0;
     background-color: var(--accent-color);
     display: table;
-    border-top-left-radius: $border-radius;
+    border-top-left-radius: defaults.$border-radius;
-    border-top-right-radius: $border-radius;
+    border-top-right-radius: defaults.$border-radius;
 
     &--round,
     &--round img {
@@ -88,51 +90,61 @@
       display: table-caption;
       caption-side: bottom;
       background-color: var(--accent-color);
-      padding: 0 $padding-4 $padding-4;
+      padding: 0 defaults.$padding-4 defaults.$padding-4;
       text-align: center;
-      border-bottom-left-radius: $border-radius;
+      border-bottom-left-radius: defaults.$border-radius;
-      border-bottom-right-radius: $border-radius;
+      border-bottom-right-radius: defaults.$border-radius;
     }
 
     img {
       max-width: 100%;
       height: auto;
     }
+
+    &:has(audio) {
+      width: 100%;
+
+      audio {
+        width: 100%;
+      }
+    }
   }
 
   img {
     max-width: 100%;
-    border-radius: $border-radius;
+    border-radius: defaults.$border-radius;
   }
 
   blockquote {
-    margin: $padding-16 0;
+    margin: defaults.$padding-16 0;
-    padding: $padding-8 $padding-16 $padding-8 ($padding-16 - $padding-4); //to keep total left space 16dp
+    padding: defaults.$padding-8 defaults.$padding-16 defaults.$padding-8
+      (defaults.$padding-16 - defaults.$padding-4); //to keep total left space 16dp
 
-    border-left: $border-4 solid var(--accent-color);
+    border: defaults.$border-1 solid var(--accent-color);
-    border-radius: $border-radius;
+    border-left: defaults.$border-4 solid var(--accent-color);
+    border-radius: defaults.$border-radius;
   }
 
   table:not(.lntable):not(.highlight) {
     display: table;
     border-spacing: 0;
     border-collapse: collapse;
-    margin-top: $padding-16;
+    margin-top: defaults.$padding-16;
-    margin-bottom: $padding-16;
+    margin-bottom: defaults.$padding-16;
     width: 100%;
     text-align: left;
 
     thead {
-      border-bottom: $border-4 solid var(--accent-color);
+      border-bottom: defaults.$border-4 solid var(--accent-color);
     }
 
     tr th,
     tr td {
-      padding: $padding-8 $padding-16;
+      padding: defaults.$padding-8 defaults.$padding-16;
     }
 
     tr {
-      border-bottom: $border-2 solid var(--accent-color);
+      border-bottom: defaults.$border-2 solid var(--accent-color);
     }
 
     tr:nth-child(2n) {
@@ -141,43 +153,43 @@
   }
 
   hr {
-    height: $border-2;
+    height: defaults.$border-2;
     border: none;
     background: var(--accent-color);
   }
 
   ul,
   ol {
-    padding-left: $padding-32;
+    padding-left: defaults.$padding-32;
   }
 
   dl {
     dt {
       font-weight: bolder;
-      margin-top: $padding-16;
+      margin-top: defaults.$padding-16;
     }
 
     dd {
-      margin-left: $padding-32;
+      margin-left: defaults.$padding-32;
     }
   }
 
   code {
-    padding: $padding-4 $padding-8;
+    padding: defaults.$padding-2 defaults.$padding-4;
   }
 
   pre,
   code {
     background-color: var(--code-background);
-    border-radius: $border-radius;
+    border-radius: defaults.$border-radius;
     color: var(--code-font-color);
-    font-size: $font-size-14;
+    font-size: defaults.$font-size-14;
-    line-height: $padding-16;
+    line-height: defaults.$padding-20;
   }
 
   pre code {
     display: block;
-    padding: $padding-16;
+    padding: defaults.$padding-16;
     width: 100%;
   }
 

src/sass/_mobile.scss

@@ -1,7 +1,9 @@
-@media screen and (max-width: $sm-breakpoint) {
+@use "defaults";
+
+@media screen and (max-width: defaults.$sm-breakpoint) {
   .gdoc-nav {
-    margin-left: -$menu-width;
+    margin-left: -(defaults.$menu-width);
-    font-size: $font-size-base;
+    font-size: defaults.$font-size-base;
 
     &__control {
       display: inline-block;
@@ -10,14 +12,14 @@
 
   .gdoc-header {
     svg.gdoc-icon {
-      width: $font-size-24;
+      width: defaults.$font-size-24;
-      height: $font-size-24;
+      height: defaults.$font-size-24;
     }
   }
 
   .gdoc-brand {
-    font-size: $font-size-24;
+    font-size: defaults.$font-size-24;
-    line-height: $font-size-24;
+    line-height: defaults.$font-size-24;
 
     &__img {
       display: none;
@@ -29,6 +31,12 @@
       display: none;
     }
 
+    &__control {
+      svg.gdoc-icon.gdoc_keyboard_arrow_right {
+        display: none;
+      }
+    }
+
     &__control,
     &__home {
       display: flex;
@@ -36,23 +44,23 @@
   }
 
   .gdoc-error {
-    padding: $padding-96 $padding-16;
+    padding: defaults.$padding-96 defaults.$padding-16;
 
     svg.gdoc-icon {
-      width: $font-size-96;
+      width: defaults.$font-size-96;
-      height: $font-size-96;
+      height: defaults.$font-size-96;
     }
 
     &__message {
-      padding-left: $padding-32;
+      padding-left: defaults.$padding-32;
     }
 
     &__line {
-      padding: $padding-4 0;
+      padding: defaults.$padding-4 0;
     }
 
     &__title {
-      font-size: $font-size-32;
+      font-size: defaults.$font-size-32;
     }
   }
 
@@ -65,7 +73,7 @@
     flex-direction: column;
 
     &.gdoc-columns {
-      margin: $padding-32 0;
+      margin: defaults.$padding-32 0;
     }
 
     .gdoc-columns__content {
@@ -74,18 +82,16 @@
     }
   }
 
-  #menu-control:checked ~ main {
+  .wrapper:has(#menu-control:checked) {
     .gdoc-nav nav,
     .gdoc-page {
-      transform: translateX($menu-width);
+      transform: translateX(defaults.$menu-width);
     }
 
     .gdoc-page {
       opacity: 0.25;
     }
-  }
 
-  #menu-control:checked ~ .gdoc-header .gdoc-nav__control {
     svg.gdoc-icon.gdoc_menu {
       display: none;
     }
@@ -95,7 +101,7 @@
     }
   }
 
-  #menu-header-control:checked ~ .gdoc-header {
+  .wrapper:has(#menu-header-control:checked) {
     .gdoc-brand {
       display: none;
     }
@@ -109,6 +115,9 @@
         svg.gdoc-icon.gdoc_keyboard_arrow_left {
           display: none;
         }
+        svg.gdoc-icon.gdoc_keyboard_arrow_right {
+          display: inline-block;
+        }
       }
     }
   }

src/sass/_print.scss

@@ -1,3 +1,5 @@
+@use "defaults";
+
 @media print {
   .gdoc-nav,
   .gdoc-footer .container span:not(:first-child),
@@ -7,7 +9,7 @@
   }
 
   .gdoc-footer {
-    border-top: $border-1 solid $gray-300;
+    border-top: defaults.$border-1 solid defaults.$gray-300;
   }
 
   .gdoc-markdown pre {
@@ -16,8 +18,8 @@
   }
 
   .chroma code {
-    border: $border-1 solid $gray-300;
+    border: defaults.$border-1 solid defaults.$gray-300;
-    padding: $padding-8 !important;
+    padding: defaults.$padding-8 !important;
     font-weight: normal !important;
   }
 

src/sass/_shortcodes.scss

@@ -1,21 +1,24 @@
+@use "sass:color";
+@use "defaults";
+
 // {{< expand "Label" "icon" >}}
 .gdoc-expand {
-  margin: $padding-16 0;
+  margin: defaults.$padding-16 0;
 
-  border: $border-1 solid var(--accent-color);
+  border: defaults.$border-1 solid var(--accent-color);
-  border-radius: $border-radius;
+  border-radius: defaults.$border-radius;
 
   overflow: hidden;
 
   &__head {
     background: var(--accent-color-lite);
-    padding: $padding-8 $padding-16;
+    padding: defaults.$padding-8 defaults.$padding-16;
     cursor: pointer;
   }
 
   &__content {
     display: none;
-    padding: 0 $padding-16;
+    padding: 0 defaults.$padding-16;
   }
 
   &__control:checked + &__content {
@@ -29,10 +32,10 @@
 
 // {{< tabs >}}
 .gdoc-tabs {
-  margin: $padding-16 0;
+  margin: defaults.$padding-16 0;
 
-  border: $border-1 solid var(--accent-color);
+  border: defaults.$border-1 solid var(--accent-color);
-  border-radius: $border-radius;
+  border-radius: defaults.$border-radius;
 
   overflow: hidden;
 
@@ -41,21 +44,21 @@
 
   &__label {
     display: inline-block;
-    padding: $padding-8 $padding-16;
+    padding: defaults.$padding-8 defaults.$padding-16;
-    border-bottom: $border-1 transparent;
+    border-bottom: defaults.$border-1 transparent;
     cursor: pointer;
   }
 
   &__content {
     order: 999; //Move content blocks to the end
     width: 100%;
-    border-top: $border-1 solid var(--accent-color-lite);
+    border-top: defaults.$border-1 solid var(--accent-color-lite);
-    padding: 0 $padding-16;
+    padding: 0 defaults.$padding-16;
     display: none;
   }
 
   &__control:checked + &__label {
-    border-bottom: $border-2 solid var(--link-color);
+    border-bottom: defaults.$border-2 solid var(--link-color);
   }
   &__control:checked + &__label + &__content {
     display: block;
@@ -68,7 +71,7 @@
 
 // {{< columns >}}
 .gdoc-columns {
-  margin: $padding-16 0;
+  margin: defaults.$padding-16 0;
 
   &--regular > :first-child {
     flex: 1;
@@ -76,17 +79,17 @@
 
   &--small > :first-child {
     flex: 0.35;
-    min-width: $body-min-width * 0.35;
+    min-width: defaults.$body-min-width * 0.35;
   }
 
   &--large > :first-child {
     flex: 1.65;
-    min-width: $body-min-width * 1.65;
+    min-width: defaults.$body-min-width * 1.65;
   }
 
   &__content {
     flex: 1 1;
-    min-width: $body-min-width * 0.66;
+    min-width: defaults.$body-min-width * 0.66;
     padding: 0;
   }
 
@@ -98,12 +101,12 @@
 // {{< button >}}
 .gdoc-button {
   $root: &;
-  margin: $padding-16 0;
+  margin: defaults.$padding-16 0;
 
   display: inline-block;
   background: var(--accent-color-lite);
-  border: $border-1 solid var(--accent-color);
+  border: defaults.$border-1 solid var(--accent-color);
-  border-radius: $border-radius;
+  border-radius: defaults.$border-radius;
   cursor: pointer;
 
   &__link {
@@ -115,78 +118,71 @@
   &:hover {
     background: var(--button-background);
     border-color: var(--button-border-color);
-    color: $gray-100;
+    color: defaults.$gray-100;
   }
 
   &--regular {
-    font-size: $font-size-base;
+    font-size: defaults.$font-size-base;
 
     #{$root}__link {
-      padding: $padding-4 $padding-8;
+      padding: defaults.$padding-4 defaults.$padding-8;
     }
   }
 
   &--large {
-    font-size: $font-size-20;
+    font-size: defaults.$font-size-20;
 
     #{$root}__link {
-      padding: $padding-8 $padding-16;
+      padding: defaults.$padding-8 defaults.$padding-16;
     }
   }
 }
 
 // {{< hint >}}
 .gdoc-hint {
-  @each $name, $color in $hint-colors {
+  $root: &;
+  @each $name, $color in defaults.$hint-colors {
     &.#{$name} {
-      border-left-color: $color;
+      border-color: $color;
-      background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
-      color: $body-font-color;
       padding: 0;
 
-      code,
+      #{$root}__title {
-      pre {
+        background-color: color.adjust($color, $alpha: -0.9);
-        background-color: color.scale($color, $lightness: 80%, $saturation: -75%);
+        border-start-start-radius: inherit;
-        color: $code-font-color;
+        border-start-end-radius: inherit;
+        position: relative;
+        z-index: -10;
+        outline: color.adjust($color, $alpha: -0.9);
       }
     }
   }
 
   &__title {
-    padding: $padding-4 $padding-16;
+    padding: defaults.$padding-4 defaults.$padding-16;
-    background-color: color.scale($gray-600, $alpha: -95%);
     font-weight: bold;
-    color: color.scale($body-font-color, $alpha: -15%);
+    color: var(--body-font-color);
+    margin-left: -5px;
 
-    i.fa::after {
+    @each $name, $icon in defaults.$hint-icons {
-      content: attr(title);
-      font-style: normal;
-      padding-left: $padding-24;
-    }
-
-    i.fa {
-      color: $black;
-      background-size: auto 90%;
-      background-repeat: no-repeat;
-      filter: invert(30%);
-      margin-left: -5px;
-    }
-
-    @each $name, $icon in $hint-icons {
       i.fa.#{$name} {
-        background-image: url(img/geekdoc-stack.svg##{$icon});
+        width: defaults.$font-size-24;
+        height: defaults.$font-size-24;
+
+        mask-image: url(img/geekdoc-stack.svg##{$icon});
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        background-color: var(--body-font-color);
       }
     }
 
     .gdoc-icon {
-      width: $font-size-24;
+      width: defaults.$font-size-24;
-      height: $font-size-24;
+      height: defaults.$font-size-24;
-      margin-left: -5px;
     }
   }
 
   &__text {
-    padding: $padding-4 $padding-16;
+    padding: defaults.$padding-4 defaults.$padding-16;
   }
 
   .gdoc-page__anchor {
@@ -201,7 +197,7 @@
   // Fix height of mermaid SVG elements (see https://github.com/mermaid-js/mermaid/issues/2481)
   > svg {
     height: 100%;
-    padding: $padding-8;
+    padding: defaults.$padding-8;
   }
 }
 
@@ -217,14 +213,14 @@
   &__meta {
     gap: 0.5em;
     line-height: normal;
-    margin-bottom: $padding-4;
+    margin-bottom: defaults.$padding-4;
 
     &:hover .gdoc-page__anchor svg.gdoc-icon {
       color: var(--control-icons);
     }
   }
 
-  @each $name, $color in $hint-colors {
+  @each $name, $color in defaults.$hint-colors {
     &__tag.#{$name} {
       border-color: color.scale($color, $lightness: 90%, $saturation: -30%);
       background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
@@ -232,26 +228,26 @@
   }
 
   &__tag {
-    font-size: $font-size-14;
+    font-size: defaults.$font-size-14;
     font-weight: normal;
-    background-color: $gray-100;
+    background-color: defaults.$gray-100;
-    border: $border-1 solid $gray-200;
+    border: defaults.$border-1 solid defaults.$gray-200;
-    border-radius: $border-radius;
+    border-radius: defaults.$border-radius;
-    padding: $padding-2 $padding-4;
+    padding: defaults.$padding-2 defaults.$padding-4;
-    color: $body-font-color;
+    color: defaults.$body-font-color;
   }
 
   &__default {
-    font-size: $font-size-14;
+    font-size: defaults.$font-size-14;
   }
 }
 
 // {{% progress %}}
 .gdoc-progress {
-  margin-bottom: $padding-16;
+  margin-bottom: defaults.$padding-16;
 
   &__label {
-    padding: $padding-4 0;
+    padding: defaults.$padding-4 0;
 
     &--name {
       font-weight: bold;
@@ -261,7 +257,7 @@
   &__wrap {
     background-color: var(--accent-color-lite);
     border-radius: 1em;
-    box-shadow: inset 0 0 0 $border-1 var(--accent-color);
+    box-shadow: inset 0 0 0 defaults.$border-1 var(--accent-color);
   }
 
   &__bar {
@@ -278,6 +274,23 @@
       transparent
     );
     background-size: 2.5em 2.5em;
-    background-color: $main-color !important;
+    background-color: defaults.$main-color;
+
+    @each $name, $color in defaults.$hint-colors {
+      &.#{$name} {
+        background-image: linear-gradient(
+          -45deg,
+          #{color.scale($color, $lightness: -20%)} 25%,
+          transparent 25%,
+          transparent 50%,
+          #{color.scale($color, $lightness: -20%)} 50%,
+          #{color.scale($color, $lightness: -20%)} 75%,
+          transparent 75%,
+          transparent
+        );
+
+        background-color: $color;
+      }
+    }
   }
 }

src/sass/_utils.scss

@@ -1,3 +1,5 @@
+@use "defaults";
+
 .flex {
   display: flex;
 }
@@ -24,14 +26,19 @@
 
 .flex-grid {
   flex-direction: column;
-  border: $border-1 solid var(--accent-color);
+  border: defaults.$border-1 solid var(--accent-color);
-  border-radius: $border-radius;
+  border-radius: defaults.$border-radius;
   background: var(--accent-color-lite);
 }
 
-.flex-gap {
+.gap-8 {
   flex-wrap: wrap;
-  gap: $padding-16;
+  gap: defaults.$padding-8;
+}
+
+.gap-16 {
+  flex-wrap: wrap;
+  gap: defaults.$padding-16;
 }
 
 .justify-start {
@@ -83,7 +90,7 @@
 
 .table-wrap {
   overflow: auto;
-  margin: $padding-16 0;
+  margin: defaults.$padding-16 0;
 
   > table {
     margin: 0 !important;
@@ -94,3 +101,7 @@
   display: inline-block;
   min-width: 4rem;
 }
+
+.w-full {
+  width: 100%;
+}

src/sass/main.scss

@@ -1,18 +1,8 @@
-@use "sass:map";
+@use "_normalize";
-@use "sass:meta";
+@use "_utils";
-@use "sass:color";
+@use "_fonts";
+@use "_base";
 
-@import "_defaults";
+@use "_markdown";
-@import "_color_mode";
+@use "_asciidoc";
-@import "_chroma_base";
+@use "_shortcodes";
-@import "_chroma_light";
-@import "_chroma_dark";
-
-@import "_normalize";
-@import "_utils";
-@import "_fonts";
-@import "_base";
-
-@import "_markdown";
-@import "_asciidoc";
-@import "_shortcodes";

src/sass/mobile.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
 
-@import "_defaults";
+@use "_defaults";
-
+@use "_mobile";
-@import "_mobile";

src/sass/print.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
 
-@import "_defaults";
+@use "_defaults";
-
+@use "_print";
-@import "_print";

webpack.config.js

@@ -87,7 +87,7 @@ var config = {
       generate(seed, files) {
         let manifest = {}
 
-        files.forEach(function (element, index) {
+        files.forEach(function (element) {
           if (element.name.endsWith("VERSION")) return
           if (element.name.endsWith(".svg")) return
           if (element.name.startsWith("fonts/")) return