9 |
10 |
13 |
14 | {% endif %}
15 | On this page
11 | 12 |
16 | {{ content | safe }}
17 |
18 |
7 | {% set posts = collections.all | parentFilter(eleventyNavigation.key) %}
8 | {% for post in posts %}
9 |
21 | {% endblock %}
22 |
--------------------------------------------------------------------------------
/src/_includes/partials/post-heading.html:
--------------------------------------------------------------------------------
1 |
10 |
11 |
18 | {% endfor %}
19 |
20 | {{ post.data.title }}
12 |{{ post.data.summary }}
13 | 14 | Read More 15 | {{ post.title }} 16 | 17 |
2 | {% if headline %}
3 |
30 |
--------------------------------------------------------------------------------
/src/js/theme-switcher.js:
--------------------------------------------------------------------------------
1 | (() => {
2 | const themeSwitcher = document.querySelector('#theme-switcher');
3 | const preferredTheme = localStorage.getItem('preferred-theme') ?? 'system';
4 |
5 | if (!themeSwitcher) {
6 | return;
7 | }
8 |
9 | themeSwitcher.addEventListener('click', (e) => {
10 | if (!e.target.matches('[data-action]')) {
11 | return;
12 | }
13 |
14 | const theme = e.target.getAttribute('data-action');
15 | const systemMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
16 | document.documentElement.classList.add('no-transition');
17 |
18 | localStorage.setItem('preferred-theme', theme);
19 | document.documentElement.setAttribute('data-theme-mode', theme === 'system' ? systemMode : theme);
20 | themeSwitcher.setAttribute('data-theme-mode', theme);
21 | themeSwitcher.querySelector(`.theme-switcher__${theme}-mode`).focus();
22 | document.documentElement.classList.remove('no-transition');
23 | });
24 |
25 | themeSwitcher.setAttribute('data-theme-mode', preferredTheme);
26 | })();
27 |
--------------------------------------------------------------------------------
/src/scss/component/_breadcrumb-list.scss:
--------------------------------------------------------------------------------
1 | @use 'sprucecss/scss/spruce' as *;
2 |
3 | .breadcrumb-list {
4 | @include clear-list;
5 | align-items: center;
6 | display: flex;
7 | max-inline-size: 100%;
8 | overflow-x: auto;
9 | white-space: nowrap;
10 |
11 | > li {
12 | align-items: center;
13 | display: inline-flex;
14 | margin-block: 0;
15 |
16 | + li::before {
17 | block-size: 0.4em;
18 | border-block-end: 2px solid color('separator', 'breadcrumb');
19 | border-inline-end: 2px solid color('separator', 'breadcrumb');
20 | content: '';
21 | display: inline-flex;
22 | inline-size: 0.4em;
23 | margin-inline: 0.75em;
24 | transform: rotate(-45deg);
25 |
26 | @at-root {
27 | [dir='rtl'] & {
28 | transform: rotate(45deg);
29 | }
30 | }
31 | }
32 | }
33 |
34 | a {
35 | text-decoration: none;
36 | }
37 |
38 | [aria-current='page'] {
39 | @include text-ellipsis(1);
40 | display: inline-block;
41 | max-inline-size: 20ch;
42 | text-align: start;
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/img/icon/twitter.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 Cone Development
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/_includes/layouts/changelog.html:
--------------------------------------------------------------------------------
1 | {% extends "layouts/base.html" %}
2 | {% block content %}
3 | {{ headline }}
4 | {% endif %} 5 | {% if breadcrumbs %} 6 | {% include "partials/breadcrumbs.html" %} 7 | {% endif %} 8 | {% if title %} 9 |10 | {{ title }} 11 |
12 | {% endif %} 13 | {% if summary and displaySummary %} 14 |15 | {{ summary }} 16 |
17 | {% endif %} 18 | {% if btns %} 19 |
20 | {% for btn in btns %}
21 | {% set cls = 'btn--primary btn--primary-shadow' %}
22 | {% if btn.type === 'outline' %}
23 | {% set cls = 'btn--outline-primary' %}
24 | {% endif %}
25 | {{ btn.caption }}
26 | {% endfor %}
27 |
28 | {% endif %}
29 |
4 | {% set breadcrumbs = [{
5 | "title": title,
6 | "url": page.url
7 | }] %}
8 | {% include "partials/post-heading.html" %}
9 |
25 | {% endblock %}
26 |
--------------------------------------------------------------------------------
/src/posts/getting-started/posts/setup.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Setup"
3 | summary: "We use eleventy --serve and compile Sass with sass-cli with npm scripts."
4 | eleventyNavigation:
5 | key: Setup
6 | parent: Getting Started
7 | order: 4
8 | ---
9 |
10 | ## Clone the repository
11 |
12 | Today more people and experts write about accessibility. For the better progression it is a good idea to read them.
13 |
14 | ## Install the dependencies
15 |
16 | In the `package.json` file, you will find all of the dependencies (and scripts) to install them using the following command:
17 |
18 | ```shell
19 | npm install
20 | ```
21 |
22 | ## Run the development mode
23 |
24 | To run the development mode, use the `npm script`. This script will also watch for changes.
25 |
26 | ```shell
27 | npm start
28 | ```
29 |
30 | ## Run the production mode
31 |
32 | Before you go live, you should use the production script to compress the Sass files.
33 |
34 | ```shell
35 | npm run prod
36 | ```
37 |
38 | ## Additional Scripts
39 |
40 | You can find some more npm scripts in the [package.json](https://github.com/conedevelopment/sprucecss-eleventy-documentation-template/blob/main/package.json) that can be helpful.
41 |
--------------------------------------------------------------------------------
/src/scss/component/_post-content.scss:
--------------------------------------------------------------------------------
1 | @use 'sprucecss/scss/spruce' as *;
2 |
3 | .post-content {
4 | @include layout-stack;
5 |
6 | @include breakpoint('md') {
7 | font-size: 1.0375rem;
8 | }
9 |
10 | :is(dd, dl, dl, h1, h2, h3:not(.accordion-card__title), h4, h5, h6, hr, ul, ol, p, blockquote) {
11 | max-inline-size: 40rem;
12 | }
13 |
14 | * + h2,
15 | * + h3 {
16 | margin-top: spacer('l');
17 | }
18 |
19 | h2 + *,
20 | h3 + *,
21 | h4 + *,
22 | h5 + *,
23 | h6 + * {
24 | margin-top: spacer('s');
25 | }
26 |
27 | h2[id] {
28 | align-items: flex-start;
29 | display: flex;
30 | justify-content: space-between;
31 |
32 | &:hover .anchor,
33 | &:focus-within .anchor {
34 | opacity: 1;
35 | }
36 |
37 | .anchor {
38 | font-weight: 600;
39 | opacity: 0;
40 | text-decoration: none;
41 | }
42 | }
43 |
44 | img,
45 | iframe {
46 | border-radius: config('border-radius-sm', $display);
47 | }
48 |
49 | iframe {
50 | aspect-ratio: 16 / 9;
51 | }
52 |
53 | a > code {
54 | color: color('link');
55 | }
56 |
57 | strong {
58 | color: color('heading');
59 | }
60 |
61 | picture {
62 | display: flex;
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/src/_includes/layouts/faq.html:
--------------------------------------------------------------------------------
1 | {% extends "layouts/base.html" %}
2 | {% block content %}
3 |
10 | {% for change in changelog %}
11 |
24 |
12 |
13 |
22 | {% endfor %}
23 |
14 |
21 | {{ change.title }}
15 |-
16 | {% for row in change.items %}
17 |
- {% markdownRender row %} 18 | {% endfor %} 19 |
4 | {% set breadcrumbs = [{
5 | "title": title,
6 | "url": page.url
7 | }] %}
8 | {% include "partials/post-heading.html" %}
9 |
29 | {% endblock %}
30 |
--------------------------------------------------------------------------------
/src/scss/layout/_main.scss:
--------------------------------------------------------------------------------
1 | @use 'sprucecss/scss/spruce' as *;
2 |
3 | .l-main {
4 | --gtc: minmax(0, 1fr);
5 |
6 | display: grid;
7 | gap: spacer('l');
8 | grid-template-columns: var(--gtc);
9 | margin-block: spacer-clamp('m', 'l') spacer-clamp('l', 'xl');
10 |
11 | @include breakpoint('sm') {
12 | --gtc: minmax(0, 16rem) minmax(0, 1fr);
13 | gap: calc(#{get-css-variable(--container-gap)} * 1.5);
14 | }
15 |
16 | @include breakpoint('md') {
17 | --gtc: minmax(0, 18.5rem) minmax(0, 1fr);
18 | }
19 |
20 | @include breakpoint('lg') {
21 | --gtc: minmax(0, 20rem) minmax(0, 1fr);
22 | }
23 |
24 | &__sidebar {
25 | display: none !important;
26 |
27 | @include breakpoint('sm') {
28 | border-inline-end: 1px solid color('border');
29 | display: flex !important;
30 | inset-block-start: spacer('l');
31 | max-block-size: calc(100vh - #{spacer('l')} * 2);
32 | position: sticky;
33 | }
34 |
35 | &--open {
36 | display: flex !important;
37 | }
38 | }
39 |
40 | &__body {
41 | display: flex;
42 | flex-direction: column;
43 | inline-size: 100%;
44 | margin-inline: auto;
45 | max-inline-size: get-css-variable(--max-content-inline-size);
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/_includes/partials/post-navigation.html:
--------------------------------------------------------------------------------
1 | {% set previousPost = collections.posts | getPreviousCollectionItem %}
2 | {% set nextPost = collections.posts | getNextCollectionItem %}
3 |
4 |
28 |
--------------------------------------------------------------------------------
/src/scss/component/_pagefind.scss:
--------------------------------------------------------------------------------
1 | @use 'sprucecss/scss/spruce' as *;
2 |
3 | @include generate-form-control('.pagefind-ui__search-input', false, false, false);
4 |
5 | .pagefind-ui {
6 | position: relative;
7 |
8 | &__search-input {
9 | padding: config('padding', $form-control, false) !important;
10 | }
11 |
12 | &__form {
13 | @include layout-stack('s');
14 | }
15 |
16 | &__search-clear {
17 | background: none;
18 | border: 0;
19 | font-size: config('font-size-sm', $typography);
20 | inset-block-start: 0.8em;
21 | inset-inline-end: 0.5em;
22 | margin-block-start: 0;
23 | position: absolute;
24 | text-transform: uppercase;
25 | }
26 |
27 | &__drawer {
28 | @include scrollbar;
29 | max-block-size: 20rem;
30 | overflow-y: auto;
31 | }
32 |
33 | &__results {
34 | @include clear-list;
35 | @include layout-stack('s');
36 | padding-inline-end: spacer('m');
37 |
38 | &:empty {
39 | display: none;
40 | }
41 | }
42 |
43 | &__results-area {
44 | @include layout-stack('xs');
45 | }
46 |
47 | &__result-inner {
48 | @include layout-stack('xxs');
49 | }
50 |
51 | &__result-title {
52 | font-weight: 700;
53 | }
54 |
55 | &__hidden {
56 | display: none;
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/posts/getting-started/posts/content-management.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Content Management"
3 | summary: "Today more people and experts write about accessibility. For the better progression it is a good idea to read them."
4 | eleventyNavigation:
5 | key: Content Management
6 | parent: Getting Started
7 | order: 5
8 | ---
9 |
10 | Adding content to the template is easy as almost everything is in Eleventy.
11 |
12 | ## The Basic Structure
13 |
14 | Our base folder for the documentation pages is the `posts` folder. You must follow the folder structure, which means the `category` here. If you create a folder, you must make a list page with the same name as the folder. You must also create another `posts` folder under the `category` folder where your posts go. You must create the `posts.json` file that will parameter your `layout` and `permalink` values.
15 |
16 | ## Eleventy Navigation
17 |
18 | The theme utilizes the [Eleventy Navigation plugin](https://www.11ty.dev/docs/plugins/navigation/), so you must explicitly set up the hierarchy. This is needed for the automatic sidebar navigation, the navigation order, and breadcrumb generation.
19 |
20 | ## Other Pages
21 |
22 | To create simple pages, make a file directly under the `src` folder and configure it with the available front matter.
23 |
--------------------------------------------------------------------------------
/src/posts/getting-started/posts/introduction.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Introduction"
3 | summary: "Welcome to the official documentation of Spruce Docs Elventy theme. A small template that you can use to document any of your projects."
4 | eleventyNavigation:
5 | key: Introduction
6 | parent: Getting Started
7 | order: 1
8 | ---
9 |
10 | Welcome to the official documentation of **Spruce Docs** Elventy theme. A small template that you can use to document any of your projects.
11 |
12 | ## About the Template
13 |
14 | A documentation template is always helpful. There are a lot of solutions to make one; we wanted to create our self-hosted version based on our favorite static site generator.
15 |
16 | By structure, it is simple, with two levels and additional custom templates like [FAQ](/faq/) and [Changelog](/changelog/).
17 |
18 | ## Spruce CSS
19 |
20 | The template is built on [Spruce CSS](https://sprucecss.com/), a small and customizable CSS framework. The main benefit of this is that you can use the Spruce UI components with dark mode and RTL support.
21 |
22 |
10 | {% for faq in faqs %}
11 |
28 |
12 | {% if faq.title %}
13 |
26 | {% endfor %}
27 | {{ faq.title }}
14 | {% endif %} 15 |
16 | {% for post in faq.items %}
17 |
25 |
18 |
23 | {% endfor %}
24 | {{ post.title }}
19 |
20 | {% markdownRender post.description %}
21 |
22 | 
29 |
--------------------------------------------------------------------------------
/src/js/modal.js:
--------------------------------------------------------------------------------
1 | (() => {
2 | let activeElement = null;
3 | const siteWrapper = document.querySelector('.site-wrapper');
4 | const button = document.querySelector('[data-action="open-search"]');
5 | const input = document.querySelector('.pagefind-ui__search-input');
6 | const modal = document.querySelector('.modal-backdrop');
7 |
8 | if (!button || !modal) return;
9 |
10 | function openModal() {
11 | activeElement = document.activeElement;
12 | siteWrapper.setAttribute('inert', '');
13 | modal.classList.add('modal-backdrop--open');
14 | input.focus();
15 | }
16 |
17 | function closeModal() {
18 | siteWrapper.removeAttribute('inert');
19 | modal.classList.remove('modal-backdrop--open');
20 | activeElement.focus();
21 | }
22 |
23 | function handleKeyDown(e) {
24 | if (e.code === 'Escape') {
25 | closeModal();
26 | }
27 |
28 | if (e.ctrlKey && e.code === 'KeyK') {
29 | e.preventDefault();
30 | openModal();
31 | }
32 | }
33 |
34 | modal.addEventListener('click', (e) => {
35 | if (e.target === e.currentTarget) {
36 | closeModal();
37 | }
38 | });
39 |
40 | button.addEventListener('click', () => {
41 | openModal();
42 | });
43 |
44 | window.addEventListener('keydown', handleKeyDown);
45 | })();
46 |
--------------------------------------------------------------------------------
/src/changelog.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Changelog"
3 | layout: "layouts/changelog.html"
4 | changelog:
5 | - date: "2023-05-24"
6 | title: "v1.1.0"
7 | items:
8 | - "**This is a test changelog record for demonstration.**"
9 | - "**Improvement:** add `$btn-font-family` to control the button's font family."
10 | - "**Improvement:** add `$heading-font-weight` to control the heading's font-weight."
11 | - "**Improvement:** rename some keys in the `$colors` map (`mark-color` : `mark-foreground`, `code-color` : `code-foreground`)."
12 | - "**Improvement:** reorganize the recurrent colors into variables."
13 | - "**Fix:** modify `btn-variant()` mixin: add hover foreground color."
14 | - "Global switch to `color()` function's fallback value under the [`$settings`](https://sprucecss.com/docs/sass/variables#settings) map."
15 | - "Modify the [`scrollbar()`](https://sprucecss.com/docs/sass/mixins#scrollbar) mixin to accept hover thumb background-color value."
16 | - "Make `$breakpoints` overwriteable by key."
17 | - "Modify `font-size()` and `responsive-font-size()` function to accept optimal size value. The optimal value will fallback to a global settnigs under the `$settings` map."
18 | - date: "2023-05-23"
19 | title: "v1.0.0"
20 | items:
21 | - "Initial release"
22 | ---
23 |
--------------------------------------------------------------------------------
/src/scss/section/_footer.scss:
--------------------------------------------------------------------------------
1 | @use 'sprucecss/scss/spruce' as *;
2 |
3 | .footer {
4 | --logo-block-size: 4rem;
5 | --logo-inline-size: 4rem;
6 |
7 | border-block-start: 1px solid color('border');
8 | margin-block-start: spacer-clamp('l', 'xl');
9 | padding-block-start: spacer-clamp('l', 'xl');
10 |
11 | &__inner {
12 | @include layout-grid('l', 12rem);
13 | }
14 |
15 | &__logo {
16 | block-size: var(--logo-block-size);
17 | display: flex;
18 | inline-size: var(--logo-inline-size);
19 | }
20 |
21 | &__title {
22 | font-size: font-size('h4');
23 | }
24 |
25 | &__navigation {
26 | @include clear-list;
27 | @include layout-stack('xs');
28 |
29 | a {
30 | align-items: center;
31 | color: color('text');
32 | display: inline-flex;
33 | gap: spacer('xs');
34 | text-decoration: none;
35 |
36 | &:hover,
37 | &:focus,
38 | &:active,
39 | &[aria-current='page'] {
40 | color: color('primary');
41 | }
42 |
43 | &[aria-current='page'] {
44 | font-weight: 700;
45 | }
46 |
47 | svg {
48 | --dimension: 0.65em;
49 | block-size: var(--dimension);
50 | color: color('arrow', 'navigation');
51 | inline-size: var(--dimension);
52 | }
53 | }
54 | }
55 |
56 | &__column {
57 | @include layout-stack('m');
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/src/js/accordion-card.js:
--------------------------------------------------------------------------------
1 | (() => {
2 | document.querySelectorAll('.accordion-card').forEach((accordion) => {
3 | const heading = accordion.querySelector('.accordion-card__title');
4 |
5 | accordion.classList.add('accordion-card--js');
6 |
7 | heading.nextElementSibling.hidden = true;
8 | heading.innerHTML = `
9 |
16 | `;
17 |
18 | const btn = heading.querySelector('button');
19 |
20 | btn.addEventListener('click', () => {
21 | const expanded = btn.getAttribute('aria-expanded') === 'true';
22 |
23 | btn.setAttribute('aria-expanded', !expanded);
24 | heading.nextElementSibling.hidden = expanded;
25 | });
26 | });
27 | })();
28 |
--------------------------------------------------------------------------------
/src/img/icon/github.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/src/_includes/partials/footer.html:
--------------------------------------------------------------------------------
1 |
35 |
--------------------------------------------------------------------------------
/src/posts/getting-started/posts/features.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Features"
3 | summary: "We tried to make a simple but well-structured theme. Managing the content is straightforward but still comes with some helpful features."
4 | eleventyNavigation:
5 | key: Features
6 | parent: Getting Started
7 | order: 2
8 | ---
9 |
10 | We tried to make a simple but well-structured theme. Managing the content is straightforward but still comes with some helpful features.
11 |
12 | ## Eleventy
13 |
14 | - Breadcrumb navigation built on [11ty Navigation Plugin](https://www.11ty.dev/docs/plugins/navigation/).
15 | - HTML minification in production mode.
16 | - Anchor headings.
17 | - Table of Content.
18 | - FAQ template.
19 | - Changelog template.
20 | - Static search integration with [pagefind](https://pagefind.app/).
21 | - Code highlighting.
22 | - [svgIcon](https://github.com/conedevelopment/sprucecss-eleventy-documentation-template/blob/main/src/shortcodes/svg-icon.js) shortcode: render any SVG icon inline and add optional classes.
23 | - [markdownRenderer](https://github.com/conedevelopment/sprucecss-eleventy-documentation-template/blob/main/src/shortcodes/markdown-render.js): render any string (markdown) into HTML.
24 |
25 | ## CSS Customization
26 |
27 | The template utilizes Spruce CSS and some of its components. You can learn more about the customization on the [official documentation](https://sprucecss.com/).
28 |
29 | - RTL support.
30 | - Dark mode.
31 |
--------------------------------------------------------------------------------
/src/posts/getting-started/posts/structure.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Structure"
3 | summary: "The structure is a generic Eleventy theme with the standard folder and file names."
4 | eleventyNavigation:
5 | key: Structure
6 | parent: Getting Started
7 | order: 3
8 | ---
9 |
10 | The structure is a generic Eleventy theme with the standard folder and file names.
11 |
12 | ## Tree View
13 |
14 | ```html
15 | spruecss-eleventy-documentation-template/
16 | ├─ node_modules/
17 | ├─ dist/
18 | ├─ src/
19 | │ ├─ _data/
20 | │ ├─ _includes/
21 | │ ├─ css/
22 | │ ├─ filters/
23 | │ ├─ font/
24 | │ ├─ img/
25 | │ ├─ js/
26 | │ ├─ posts/
27 | │ ├─ scss/
28 | │ ├─ shortcodes/
29 | │ ├─ transforms/
30 | │ ├─ changelog.md
31 | │ ├─ faq.md
32 | │ ├─ index.md
33 | ├─ .eleventy.js
34 | ├─ package.json
35 | ├─ README.md
36 | ├─ ...
37 |
38 | ```
39 |
40 | ## _data
41 |
42 | Some global data, like the name of your site and helpers like the active navigation element or current year.
43 |
44 | ## __includes
45 |
46 | All of the layout and partial templates.
47 |
48 | ## css
49 |
50 | The compiled CSS.
51 |
52 | ## filters
53 |
54 | The additional filters that you can use.
55 |
56 | ## font
57 |
58 | The custom fonts.
59 |
60 | ## img
61 |
62 | The static image files.
63 |
64 | ## posts
65 |
66 | The markdown contents.
67 |
68 | ## scss
69 |
70 | The Sass files.
71 |
72 | ## shortcodes
73 |
74 | The available shortcodes.
75 |
76 | ## transforms
77 |
78 | The transformations.
79 |
--------------------------------------------------------------------------------
/src/scss/component/_sidebar-section.scss:
--------------------------------------------------------------------------------
1 | @use 'sprucecss/scss/spruce' as *;
2 |
3 | .sidebar-section {
4 | &--navigation {
5 | @include breakpoint('sm') {
6 | display: none;
7 | }
8 | }
9 |
10 | &__title {
11 | color: color('heading');
12 | font-size: config('font-size-base', $typography);
13 | margin-block: 0;
14 | }
15 |
16 | &__navigation {
17 | border-inline-start: 1px solid color('border');
18 | font-size: 1rem;
19 | margin-block-start: 1rem;
20 | padding-inline-start: 1rem;
21 |
22 | ul {
23 | @include clear-list;
24 | }
25 |
26 | a {
27 | align-items: center;
28 | color: color('text');
29 | display: inline-flex;
30 | gap: spacer('xs');
31 | text-decoration: none;
32 |
33 | &[aria-current='page'] {
34 | color: color('heading');
35 | font-weight: 700;
36 | position: relative;
37 |
38 | &::before {
39 | background-color: color('primary');
40 | border-end-end-radius: config('border-radius-sm', $display);
41 | border-start-end-radius: config('border-radius-sm', $display);
42 | content: '';
43 | inline-size: 0.3rem;
44 | inset-block: 0;
45 | inset-inline-start: -1rem;
46 | position: absolute;
47 | }
48 | }
49 |
50 | svg {
51 | --dimension: 0.65em;
52 | block-size: var(--dimension);
53 | color: color('arrow', 'navigation');
54 | inline-size: var(--dimension);
55 | }
56 | }
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/_includes/layouts/base.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {% include "partials/preload.html" %}
6 |
7 |
8 |
9 |
10 | {% include "partials/meta.html" %}
11 |
12 |
13 |
14 |
15 | Skip to content
16 |
27 | {% include "partials/search-modal.html" %}
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/src/posts/customization/posts/spruce-css.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Spruce CSS"
3 | eleventyNavigation:
4 | key: "Spruce CSS"
5 | parent: "Customization"
6 | order: 6
7 | ---
8 |
9 | **Spruce CSS is an open-source, lightweight and modernish CSS design system, framework built on Sass. Give your project a solid foundation.**
10 |
11 | ## What is Spruce CSS?
12 |
13 | - It is a Sass-based, small framework that operates with just a few utility classes.
14 | - It takes advantage of the Sass members: variables, mixins, and functions.
15 | - It embraces Sass modules, so it uses @use and namespacing for import.
16 | - Spruce is a good choice if you prefer writing CSS instead of HTML. It uses just a few classic utility classes.
17 | - It is a relatively small (~7kb gzipped) framework with a smaller learning curve. The codebase is small but can add more to any project with the available mixins and functions.
18 | - It is that bunch of code you keep manually carrying from project to project.
19 | - It is themeable. You can create different themes using CSS custom properties like a dark one.
20 | - The generated CSS code is separated from the framework. You can use only the tools (variables, mixins, functions) in your project [without the generated styles](https://sprucecss.com/docs/elements/generators).
21 | - Include just a few components. For UI, we have a separate project named [Spruce UI](/ui/getting-started/introduction), where you can find drop-in components.
22 | - [It comes with dark-mode](https://sprucecss.com/docs/customization/themes) (or any theme mode) support. It uses CSS custom properties, so it isn’t that hard to create a new color theme.
23 | - It doesn’t come with a classical grid system.
24 |
--------------------------------------------------------------------------------
/src/scss/component/_post-navigation.scss:
--------------------------------------------------------------------------------
1 | @use 'sprucecss/scss/spruce' as *;
2 |
3 | .post-navigation {
4 | align-items: center;
5 | border-block-start: 1px solid color('border');
6 | display: flex;
7 | flex-wrap: wrap;
8 | gap: spacer('m');
9 | justify-content: space-between;
10 | margin-block-start: spacer('xl');
11 | padding-block: spacer('m');
12 | }
13 |
14 | .post-navigation-item {
15 | $this: &;
16 |
17 | align-items: center;
18 | display: flex;
19 | gap: spacer('s');
20 | text-decoration: none;
21 |
22 | &:hover {
23 | #{$this}__icon {
24 | background-color: color('icon-background-hover', 'navigation');
25 | color: color('icon-foreground-hover', 'navigation');
26 | }
27 | }
28 |
29 | &--next {
30 | margin-inline-start: auto;
31 | text-align: end;
32 | }
33 |
34 | &__icon {
35 | @include transition;
36 | align-items: center;
37 | background-color: color('icon-background', 'navigation');
38 | block-size: 3rem;
39 | border-radius: config('border-radius', $btn, false);
40 | color: color('icon-foreground', 'navigation');
41 | display: flex;
42 | flex-shrink: 0;
43 | inline-size: 3rem;
44 | justify-content: center;
45 |
46 | svg {
47 | --dimension: 1rem;
48 |
49 | block-size: var(--dimension);
50 | inline-size: var(--dimension);
51 |
52 | @at-root {
53 | [dir='rtl'] & {
54 | transform: rotate(180deg);
55 | }
56 | }
57 | }
58 | }
59 |
60 | &__caption {
61 | color: color('text');
62 | line-height: config('line-height-md', $typography);
63 | }
64 |
65 | &__title {
66 | color: color('primary');
67 | display: flex;
68 | font-weight: 700;
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/src/_includes/layouts/front-page.html:
--------------------------------------------------------------------------------
1 | {% extends "layouts/base.html" %}
2 | {% block content %}
3 |
17 | {% include "partials/header.html" %}
18 |
26 |
19 | {% include "partials/sidebar.html" %}
20 |
25 |
21 | {% block content %}{% endblock %}
22 | {% include "partials/footer.html" %}
23 |
24 |
4 | {% include "partials/post-heading.html" %}
5 | {% if overview %}
6 |
39 | {% endblock %}
40 |
--------------------------------------------------------------------------------
/src/scss/component/_accordion-card.scss:
--------------------------------------------------------------------------------
1 | @use 'sprucecss/scss/spruce' as *;
2 |
3 | .accordion-card {
4 | $this: &;
5 |
6 | background-color: color('background');
7 | border: 1px solid color('border');
8 | border-radius: config('border-radius-sm', $display);
9 | max-inline-size: 75ch;
10 |
11 | &--js {
12 | #{$this}__title {
13 | padding: 0;
14 | }
15 | }
16 |
17 | &__title {
18 | font-family: config('font-family-base', $typography);
19 | font-size: font-size('h4');
20 | margin-block: 0;
21 | padding: spacer('m');
22 | }
23 |
24 | &__toggle {
25 | @include clear-btn;
26 | align-items: center;
27 | display: flex;
28 | gap: spacer('m');
29 | inline-size: 100%;
30 | justify-content: space-between;
31 | padding: spacer('m');
32 | text-align: start;
33 |
34 | &:focus-visible {
35 | svg {
36 | @include focus-ring(
37 | $type: config('focus-ring-type', $btn, false),
38 | $ring-color: color('primary'),
39 | $ring-size: config('focus-ring-size', $btn, false),
40 | $ring-offset: config('focus-ring-offset', $btn, false)
41 | );
42 | }
43 | }
44 |
45 | svg {
46 | --dimension: 1.75rem;
47 |
48 | background-color: color('primary-background', 'btn');
49 | block-size: var(--dimension);
50 | border-radius: config('border-radius-sm', $display);
51 | color: color('primary-foreground', 'btn');
52 | flex-shrink: 0;
53 | inline-size: var(--dimension);
54 | }
55 |
56 | &[aria-expanded='true'] .vertical-line {
57 | display: none;
58 | }
59 | }
60 |
61 | &__content {
62 | @include layout-stack('xs');
63 | padding-block-end: spacer('m');
64 | padding-inline: spacer('m');
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/src/_includes/partials/meta.html:
--------------------------------------------------------------------------------
1 | {% if page.url.length > 1 %}
2 | {% set pageTitle = title + ' - ' + site.name %}
3 | {% else %}
4 | {% set pageTitle = site.name %}
5 | {% endif %}
6 |
7 | {% if site.name === title %}
8 | {% set pageTitle = title %}
9 | {% endif %}
10 |
11 | {% set siteTitle = site.name %}
12 | {% set currentUrl = site.url + page.url %}
13 |
14 | {% if not socialImage %}
15 | {% set socialImage = site.url + '/img/social-share.png' %}
16 | {% else %}
17 | {% set socialImage = site.url + socialImage %}
18 | {% endif %}
19 |
20 | {% if metaTitle %}
21 | {% set pageTitle = metaTitle %}
22 | {% endif %}
23 |
24 | {% if not metaDesc %}
25 | {% set metaDesc = summary %}
26 | {% endif %}
27 |
28 |
7 |
22 | {% endif %}
23 | {% if faqs %}
24 | Overview
8 |
9 | {% for post in overview %}
10 |
21 |
11 |
12 |
19 | {% endfor %}
20 | {{ post.title }}
13 |{{ post.description }}
14 | 15 | Read More 16 | {{ post.title }} 17 | 18 |
25 |
37 | {% endif %}
38 | Frequently Asked Questions
26 |
27 | {% for faq in faqs %}
28 |
36 |
29 |
34 | {% endfor %}
35 | {{ faq.title }}
30 |
31 | {% markdownRender faq.description %}
32 |
33 |
3 |
4 | {% svgIcon './src/img/cone-docs-logo.svg' %}
5 |
6 | {% if navigation.header.length > 0 %}
7 |
29 | {% endif %}
30 |
33 |
34 |
35 | {% include "partials/search-toggle.html" %}
36 | {% include "partials/theme-switcher.html" %}
37 |
54 |
55 |
2 |
3 |
4 | 
8 |
10 |
11 |
16 | 17 |  18 | 19 | 20 | [](https://github.com/conedevelopment/sprucecss-eleventy-documentation-template/releases/latest) 21 | [](https://github.com/conedevelopment/sprucecss-eleventy-documentation-template/blob/main/LICENSE) 22 | 23 | A documentation template is always helpful. There are a lot of solutions to make one; we wanted to create our self-hosted version based on our favorite static site generator [Eleventy](https://www.11ty.dev/). 24 | 25 | By structure, it is simple, with two levels and additional custom templates like [FAQ]([/faq/](https://eleventy-documentation.sprucecss.com/faq/)) and [Changelog]([/changelog/](https://eleventy-documentation.sprucecss.com/changelog/)). 26 | 27 | ## Spruce CSS 28 | 29 | The template is built on [Spruce CSS](https://sprucecss.com/), a small and customizable CSS framework. The main benefit of this is that you can use the Spruce UI components with dark mode and RTL support. 30 | 31 | ## Features 32 | 33 | - Breadcrumb navigation built on [11ty Navigation Plugin](https://www.11ty.dev/docs/plugins/navigation/). 34 | - HTML minification in production mode. 35 | - Anchor headings. 36 | - Table of Content. 37 | - FAQ template. 38 | - Changelog template. 39 | - Static search integration with [pagefind](https://pagefind.app/). 40 | - Code highlighting. 41 | - RTL support. 42 | - Dark theme mode. 43 | - [svgIcon](https://github.com/conedevelopment/sprucecss-eleventy-documentation-template/blob/main/src/shortcodes/svg-icon.js) shortcode: render any SVG icon inline and add optional classes. 44 | - [markdownRenderer](https://github.com/conedevelopment/sprucecss-eleventy-documentation-template/blob/main/src/shortcodes/markdown-render.js): render any string (markdown) into HTML. 45 | 46 | ## Setup 47 | 48 | 1. **Clone the repository.** 49 | 50 | 2. **Install the dependencies.** 51 | 52 | In the `package.json` file, you will find all of the dependencies (and scripts) to install them using the following command: 53 | 54 | ```shell 55 | npm install 56 | ``` 57 | 58 | 3. **Run the development mode** 59 | 60 | To run the development mode, use the `npm script`. This script will also watch for changes. 61 | 62 | ```shell 63 | npm start 64 | ``` 65 | 66 | 4. **Run the production mode** 67 | 68 | Before you go live, you should use the production script to compress the Sass files. 69 | 70 | ```shell 71 | npm run prod 72 | ``` 73 | 74 | You can find some more npm scripts in the [package.json](https://github.com/conedevelopment/sprucecss-eleventy-documentation-template/blob/main/package.json) that can be helpful. 75 | 76 | ## Content Managment 77 | 78 | Adding content to the template is easy as almost everything is in Eleventy. 79 | 80 | ### The Basic Structure 81 | 82 | Our base folder for the documentation pages is the `posts` folder. You must follow the folder structure, which means the `category` here. If you create a folder, you must make a list page with the same name as the folder. You must also create another `posts` folder under the `category` folder where your posts go. You must create the `posts.json` file that will parameter your `layout` and `permalink` values. 83 | 84 | ### Eleventy Navigation 85 | 86 | The theme utilizes the [Eleventy Navigation plugin](https://www.11ty.dev/docs/plugins/navigation/), so you must explicitly set up the hierarchy. This is needed for the automatic sidebar navigation, the navigation order, and breadcrumb generation. 87 | 88 | ### Other Pages 89 | 90 | To create simple pages, make a file directly under the `src` folder and configure it with the available front matter. 91 | 92 | ## Structure 93 | 94 | ```html 95 | spruecss-eleventy-documentation-template/ 96 | ├─ node_modules/ 97 | ├─ dist/ 98 | ├─ src/ 99 | │ ├─ _data/ 100 | │ ├─ _includes/ 101 | │ ├─ css/ 102 | │ ├─ filters/ 103 | │ ├─ font/ 104 | │ ├─ img/ 105 | │ ├─ js/ 106 | │ ├─ posts/ 107 | │ ├─ scss/ 108 | │ ├─ shortcodes/ 109 | │ ├─ transforms/ 110 | │ ├─ changelog.md 111 | │ ├─ faq.md 112 | │ ├─ index.md 113 | ├─ .eleventy.js 114 | ├─ package.json 115 | ├─ README.md 116 | ├─ ... 117 | 118 | ``` 119 | 120 | - **_data**: Some global data, like the name of your site and helpers like the active navigation element or current year. 121 | - **__includes**: All of the layout and partial templates. 122 | - **css**: The compiled CSS. 123 | - **filters**: The additional filters that you can use. 124 | - **font**: The custom fonts. 125 | - **img**: The static image files. 126 | - **posts**: The markdown contents. 127 | - **scss**: The Sass files. 128 | - **shortcodes**: The available shortcodes. 129 | - **transforms**: The transformations. 130 | 131 |
132 | 133 | [](https://app.netlify.com/sites/sprucecss-eleventy-documentation/deploys) 134 | -------------------------------------------------------------------------------- /src/img/cone-docs-logo.svg: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /.github/spruce-logo-dark.svg: -------------------------------------------------------------------------------- 1 | 21 | -------------------------------------------------------------------------------- /.github/spruce-logo-light.svg: -------------------------------------------------------------------------------- 1 | 21 | -------------------------------------------------------------------------------- /src/css/main.css: -------------------------------------------------------------------------------- 1 | @font-face{font-display:swap;font-family:"Manrope";font-style:normal;font-weight:400;src:url("../../font/manrope-v14-latin-regular.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Manrope";font-style:normal;font-weight:600;src:url("../../font/manrope-v14-latin-600.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Manrope";font-style:normal;font-weight:700;src:url("../../font/manrope-v14-latin-800.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Open Sans";font-style:normal;font-weight:400;src:url("../../font/open-sans-v35-latin-regular.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Open Sans";font-style:normal;font-weight:700;src:url("../../font/open-sans-v35-latin-700.woff2") format("woff2")}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;block-size:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-inline-size:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{block-size:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--spruce-alert-color-danger: hsl(0, 71%, 51%);--spruce-alert-color-info: hsl(195, 100%, 42%);--spruce-alert-color-success: hsl(150, 100%, 33%);--spruce-alert-color-warning: hsl(48, 89%, 55%)}:root{--spruce-base-color-background: hsl(0, 0%, 100%);--spruce-base-color-blockquote-border: hsl(238, 100%, 50%);--spruce-base-color-border: hsla(0, 0%, 0%, 0.05);--spruce-base-color-code-background: hsl(224, 94%, 97%);--spruce-base-color-code-foreground: hsl(245, 31%, 21%);--spruce-base-color-heading: hsl(232, 68%, 11%);--spruce-base-color-link: hsl(238, 100%, 50%);--spruce-base-color-link-hover: #0007cc;--spruce-base-color-mark-background: hsl(50, 100%, 80%);--spruce-base-color-mark-foreground: hsl(245, 31%, 21%);--spruce-base-color-marker: hsl(238, 100%, 50%);--spruce-base-color-primary: hsl(238, 100%, 50%);--spruce-base-color-secondary: hsl(186, 100%, 60%);--spruce-base-color-strong: hsl(245, 31%, 21%);--spruce-base-color-text: hsl(208, 21%, 39%)}:root{--spruce-btn-color-primary-background: hsl(238, 100%, 50%);--spruce-btn-color-primary-background-hover: #0007cc;--spruce-btn-color-primary-foreground: hsl(0, 0%, 100%);--spruce-btn-color-primary-shadow: #b3b5ff;--spruce-btn-color-secondary-background: hsl(186, 100%, 60%);--spruce-btn-color-secondary-background-hover: #00e6ff;--spruce-btn-color-secondary-foreground: #002e33;--spruce-btn-color-secondary-shadow: #99f5ff}:root{--spruce-form-color-background: hsl(0, 0%, 100%);--spruce-form-color-background-disabled: hsl(0, 0%, 95%);--spruce-form-color-border: hsl(260, 4%, 70%);--spruce-form-color-border-disabled: hsl(215, 63%, 93%);--spruce-form-color-border-focus: hsl(238, 100%, 50%);--spruce-form-color-check-background: hsl(238, 100%, 50%);--spruce-form-color-check-focus-ring: hsl(238, 100%, 50%);--spruce-form-color-check-foreground: hsl(0, 0%, 100%);--spruce-form-color-group-label-background: hsl(210, 60%, 98%);--spruce-form-color-group-label-foreground: hsl(208, 9%, 42%);--spruce-form-color-invalid: hsl(0, 71%, 51%);--spruce-form-color-invalid-focus-ring: rgba(219, 41, 41, 0.25);--spruce-form-color-label: hsl(245, 31%, 21%);--spruce-form-color-legend: hsl(245, 31%, 21%);--spruce-form-color-placeholder: hsl(208, 7%, 40%);--spruce-form-color-range-thumb-background: hsl(238, 100%, 50%);--spruce-form-color-range-thumb-focus-ring: hsl(238, 100%, 50%);--spruce-form-color-range-track-background: hsl(215, 63%, 93%);--spruce-form-color-ring-focus: rgba(0, 9, 255, 0.25);--spruce-form-color-select-foreground: hsl(245, 31%, 21%);--spruce-form-color-text: hsl(208, 9%, 42%);--spruce-form-color-valid: hsl(150, 100%, 33%);--spruce-form-color-valid-focus-ring: rgba(0, 168, 84, 0.25)}:root{--spruce-selection-color-foreground: hsl(0, 0%, 100%);--spruce-selection-color-background: hsl(238, 100%, 50%)}:root{--spruce-scrollbar-color-thumb-background: hsla(229, 26%, 48%, 0.15);--spruce-scrollbar-color-thumb-background-hover: hsla(0, 0%, 0%, 0.25);--spruce-scrollbar-color-track-background: hsla(226, 100%, 87%, 0.15)}:root{--spruce-table-color-border: hsl(215, 63%, 93%);--spruce-table-color-caption: hsl(208, 9%, 42%);--spruce-table-color-heading: hsl(245, 31%, 21%);--spruce-table-color-hover: hsla(0, 0%, 0%, 0.05);--spruce-table-color-stripe: hsla(0, 0%, 0%, 0.025);--spruce-table-color-text: hsl(208, 9%, 42%)}:root{--spruce-breadcrumb-color-separator: hsl(0, 0%, 80%)}:root{--spruce-card-color-background: hsl(0, 0%, 100%)}:root{--spruce-footer-color-background: hsl(224, 94%, 98%)}:root{--spruce-navigation-color-arrow: hsla(0, 0%, 0%, 0.15);--spruce-navigation-color-icon-background: hsl(224, 94%, 98%);--spruce-navigation-color-icon-background-hover: hsl(238, 100%, 50%);--spruce-navigation-color-icon-foreground: hsl(238, 100%, 50%);--spruce-navigation-color-icon-foreground-hover: hsl(0, 0%, 100%)}:root{--spruce-search-color-icon: hsla(229, 26%, 48%, 0.25)}:root{--spruce-prism-color-color: hsl(243, 14%, 29%);--spruce-prism-color-background: hsl(224, 94%, 99%);--spruce-prism-color-comment: hsl(225, 14%, 46%);--spruce-prism-color-punctuation: hsl(279, 50%, 53%);--spruce-prism-color-namespace: hsl(173, 100%, 24%);--spruce-prism-color-deleted: hsla(1, 83%, 63%, 0.56);--spruce-prism-color-boolean: hsl(0, 44%, 53%);--spruce-prism-color-number: hsl(315, 90%, 35%);--spruce-prism-color-constant: hsl(221, 57%, 52%);--spruce-prism-color-class-name: hsl(0, 0%, 7%);--spruce-prism-color-regex: hsl(1, 48%, 59%)}:root{--spruce-border-radius: 0.425rem;--spruce-font-family-base: Open Sans, sans-serif;--spruce-font-family-cursive: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;--spruce-font-family-heading: Manrope, sans-serif;--spruce-font-size-base: 1rem;--spruce-font-size-lead: clamp(1.1rem, 2vw, 1.25rem);--spruce-font-size-lg: 1.125rem;--spruce-font-size-ratio: 1.25;--spruce-font-size-sm: 0.875rem;--spruce-font-weight-heading: 700;--spruce-inline-padding: 0.1em 0.3em;--spruce-line-height-base: 1.8;--spruce-line-height-heading: calc(2px + 2ex + 2px);--spruce-line-height-lg: 1.8;--spruce-line-height-md: 1.5;--spruce-line-height-sm: 1.2;--spruce-border-radius-lg: 0.925rem;--spruce-border-radius-sm: 0.425rem;--spruce-container-inline-size: 84rem;--spruce-page-margin: 2cm;--spruce-hidden-elements: header, footer, aside, nav, form, iframe, [class^="aspect-ratio"]}@media(prefers-reduced-motion: no-preference){:root{--spruce-duration: 0.15s;--spruce-timing-function: ease-in-out}}.sr-only{block-size:1px !important;border:0 !important;clip:rect(0, 0, 0, 0) !important;inline-size:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;white-space:nowrap !important}[tabindex="-1"]:focus{outline:none !important}::selection{background-color:var(--spruce-selection-color-background);color:var(--spruce-selection-color-foreground);text-shadow:none}html{box-sizing:border-box}@media(prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}*,::before,::after{box-sizing:inherit}body{background:var(--spruce-base-color-background);color:var(--spruce-base-color-text)}a{color:var(--spruce-base-color-link);text-decoration:underline;transition-duration:var(--spruce-duration);transition-property:color;transition-timing-function:var(--spruce-timing-function)}a:hover{color:var(--spruce-base-color-link-hover)}button{color:inherit}a,button{touch-action:manipulation}hr{border:0;border-block-start:1px solid var(--spruce-base-color-border)}img{block-size:auto;display:block;max-inline-size:100%;user-select:none}iframe{block-size:100%;display:block;inline-size:100%}figure{margin-inline:0}figure figcaption{margin-block-start:.5rem;text-align:center}.table-responsive{--inline-size: 40rem;-webkit-overflow-scrolling:touch;overflow-x:auto}.table-responsive table{min-inline-size:var(--inline-size)}.table{--spruce-line-height: 1.5;--spruce-padding: 1rem;--spruce-responsive-inline-size: 40rem;border-collapse:collapse;color:var(--spruce-table-color-text);inline-size:100%}.table caption{color:var(--spruce-table-color-caption);margin-block-end:1rem}.table th,.table td{border-block-end:1px solid var(--spruce-table-color-border);line-height:var(--spruce-line-height);padding:var(--spruce-padding)}.table th{color:var(--spruce-table-color-heading);text-align:inherit;text-align:-webkit-match-parent}.table--striped>tbody>tr:nth-child(odd){background-color:var(--spruce-table-color-stripe)}.table--hover>tbody>tr:hover{background:var(--spruce-table-color-hover)}.table--clear-border th,.table--clear-border td{border:0}.table--in-line th:first-child,.table--in-line td:first-child{padding-inline-start:0}.table--in-line th:last-child,.table--in-line td:last-child{padding-inline-end:0}.table--sm{--spruce-padding: 0.5rem}.table--sm th,.table--sm td{padding:var(--spruce-padding)}.table--rounded th:first-child,.table--rounded td:first-child{border-end-start-radius:var(--spruce-border-radius-sm);border-start-start-radius:var(--spruce-border-radius-sm)}.table--rounded th:last-child,.table--rounded td:last-child{border-end-end-radius:var(--spruce-border-radius-sm);border-start-end-radius:var(--spruce-border-radius-sm)}html{-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:var(--spruce-font-family-base);font-size:var(--spruce-font-size-base);line-height:var(--spruce-line-height-base)}p,li,h1,h2,h3,h4,h5,h6{hyphens:auto;overflow-wrap:break-word}h1,h2,h3,h4,h5,h6{color:var(--spruce-base-color-heading);font-family:var(--spruce-font-family-heading);font-weight:var(--spruce-font-weight-heading);line-height:var(--spruce-line-height-heading)}h1{font-size:clamp(2.0751953125rem, 2vw + 1rem, 2.44140625rem)}h2{font-size:clamp(1.66015625rem, 2vw + 1rem, 1.953125rem)}h3{font-size:clamp(1.328125rem, 2vw + 1rem, 1.5625rem)}h4{font-size:clamp(1.0625rem, 2vw + 1rem, 1.25rem)}h5{font-size:1rem}h6{font-size:1rem}ul,ol{list-style-position:inside}ul>*,ol>*{margin-block-end:0;margin-block-start:0}ul>*+*,ol>*+*{margin-block-start:.25rem}ul li,ol li{list-style-position:outside}ul li::marker,ol li::marker{color:var(--spruce-base-color-marker)}li>ul,li>ol{margin-block-start:.25rem}dl dt{color:var(--spruce-base-color-heading);font-weight:bold}dl dd{margin:0}dl dd+dt{margin-block-start:1rem}.quote{border-inline-start:.5rem solid var(--spruce-base-color-blockquote-border);padding-inline-start:1.5rem}.quote>*{margin-block-end:0;margin-block-start:0}.quote>*+*{margin-block-start:.5rem}.quote blockquote{border-inline-start:0;padding-inline-start:0}.quote figcaption{text-align:start}blockquote{border-inline-start:.5rem solid var(--spruce-base-color-blockquote-border);margin-inline-start:0;padding-inline-start:1.5rem}blockquote>*{margin-block-end:0;margin-block-start:0}blockquote>*+*{margin-block-start:.5rem}abbr[title]{border-block-end:1px dotted;cursor:help;text-decoration:none}mark{background-color:var(--spruce-base-color-mark-background);border-radius:var(--spruce-border-radius);color:var(--spruce-base-color-mark-foreground);padding:var(--spruce-inline-padding)}code,kbd,samp{background-color:var(--spruce-base-color-code-background);border-radius:var(--spruce-border-radius);color:var(--spruce-base-color-code-foreground);padding:var(--spruce-inline-padding)}strong{color:var(--spruce-base-color-strong)}.lead{font-size:var(--spruce-font-size-lead)}.hidden,[hidden]{display:none !important}.h1{font-size:clamp(2.0751953125rem, 2vw + 1rem, 2.44140625rem)}.h2{font-size:clamp(1.66015625rem, 2vw + 1rem, 1.953125rem)}.h3{font-size:clamp(1.328125rem, 2vw + 1rem, 1.5625rem)}.h4{font-size:clamp(1.0625rem, 2vw + 1rem, 1.25rem)}.h5{font-size:1rem}.h6{font-size:1rem}.btn{--spruce-border-radius: 0.425rem;--spruce-border-width: 1px;--spruce-font-family: Manrope, sans-serif;--spruce-font-size: 1rem;--spruce-font-weight: 700;--spruce-gap: 0.5rem;--spruce-icon-padding: 0.75em;--spruce-icon-size: 1em;--spruce-padding: 0.75em 1.5em;--spruce-shadow-size: 0.25rem;align-items:center;border-radius:var(--spruce-border-radius);border-style:solid;border-width:var(--spruce-border-width);cursor:pointer;display:inline-flex;font-family:var(--spruce-font-family);font-size:var(--spruce-font-size);font-weight:var(--spruce-font-weight);gap:var(--spruce-gap);justify-content:center;line-height:1;padding:var(--spruce-padding);text-align:start;text-decoration:none;transition-duration:var(--spruce-duration);transition-property:background-color,border-color,box-shadow,color;transition-timing-function:var(--spruce-timing-function)}.btn:focus{outline-color:rgba(0,0,0,0);outline-style:solid}.btn:disabled{opacity:.5;pointer-events:none}.btn--icon{padding:var(--spruce-icon-padding)}.btn--icon.btn--sm{padding:var(--spruce-icon-padding)}.btn--icon.btn--lg{padding:var(--spruce-icon-padding)}.btn__icon{block-size:var(--spruce-icon-size);flex-shrink:0;inline-size:var(--spruce-icon-size);pointer-events:none}.btn__icon--sm{block-size:var(--spruce-icon-size);inline-size:var(--spruce-icon-size)}.btn--sm{--spruce-font-size: 0.8rem;--spruce-gap: 0.25rem;--spruce-icon-padding: 0.5em;--spruce-icon-size: 0.8rem;--spruce-padding: 0.5em 0.75em;font-size:var(--spruce-font-size);gap:var(--spruce-gap);padding:var(--spruce-padding)}.btn--lg{--spruce-font-size: 1rem;--spruce-gap: 0.5rem;--spruce-icon-padding: 0.9em;--spruce-padding: 1em 1.75em}.btn--block{inline-size:100%}.btn--primary{background-color:var(--spruce-btn-color-primary-background);border-color:var(--spruce-btn-color-primary-background);color:var(--spruce-btn-color-primary-foreground)}.btn--primary:focus-visible{outline:2px solid var(--spruce-btn-color-primary-background);outline-offset:2px}.btn--primary:hover{background-color:var(--spruce-btn-color-primary-background-hover);border-color:var(--spruce-btn-color-primary-background-hover);color:var(--spruce-btn-color-primary-foreground)}.btn--primary-shadow{box-shadow:0 .55em 1em -0.2em var(--spruce-btn-color-primary-shadow),0 .15em .35em -0.185em var(--spruce-btn-color-primary-shadow)}.btn--secondary{background-color:var(--spruce-btn-color-secondary-background);border-color:var(--spruce-btn-color-secondary-background);color:var(--spruce-btn-color-secondary-foreground)}.btn--secondary:focus-visible{outline:2px solid var(--spruce-btn-color-secondary-background);outline-offset:2px}.btn--secondary:hover{background-color:var(--spruce-btn-color-secondary-background-hover);border-color:var(--spruce-btn-color-secondary-background-hover);color:var(--spruce-btn-color-secondary-foreground)}.btn--secondary-shadow{box-shadow:0 .55em 1em -0.2em var(--spruce-btn-color-secondary-shadow),0 .15em .35em -0.185em var(--spruce-btn-color-secondary-shadow)}.btn--outline-primary{background-color:rgba(0,0,0,0);border-color:var(--spruce-btn-color-primary-background);color:var(--spruce-btn-color-primary-background)}.btn--outline-primary:focus-visible{outline:2px solid var(--spruce-btn-color-primary-background);outline-offset:2px}.btn--outline-primary:hover{background-color:var(--spruce-btn-color-primary-background);border-color:var(--spruce-btn-color-primary-background);color:var(--spruce-btn-color-primary-foreground)}.btn--outline-secondary{background-color:rgba(0,0,0,0);border-color:var(--spruce-btn-color-secondary-background);color:var(--spruce-btn-color-secondary-background)}.btn--outline-secondary:focus-visible{outline:2px solid var(--spruce-btn-color-secondary-background);outline-offset:2px}.btn--outline-secondary:hover{background-color:var(--spruce-btn-color-secondary-background);border-color:var(--spruce-btn-color-secondary-background);color:var(--spruce-btn-color-secondary-foreground)}.form-group-label{--spruce-border-radius: 0.425rem;--spruce-border-width: 1px;align-items:center;background-color:var(--spruce-form-color-group-label-background);border:var(--spruce-border-width) solid var(--spruce-form-color-border);border-radius:var(--spruce-border-radius);color:var(--spruce-form-color-group-label-foreground);display:flex;padding-inline:1rem}:root[data-theme-mode=dark]{--spruce-base-color-background: hsl(245, 38%, 11%);--spruce-base-color-blockquote-border: hsl(186, 100%, 60%);--spruce-base-color-border: hsla(0, 0%, 100%, 0.08);--spruce-base-color-card-border: hsl(207, 90%, 13%);--spruce-base-color-code-background: hsl(207, 64%, 21%);--spruce-base-color-code-foreground: hsl(0, 0%, 95%);--spruce-base-color-footer-background: hsla(0, 0%, 0%, 0.15);--spruce-base-color-heading: hsl(0, 0%, 95%);--spruce-base-color-link-hover: #47edff;--spruce-base-color-link: hsl(186, 100%, 60%);--spruce-base-color-mark-background: hsl(50, 100%, 80%);--spruce-base-color-mark-foreground: hsl(245, 38%, 11%);--spruce-base-color-marker: hsl(186, 100%, 60%);--spruce-base-color-primary: hsl(186, 100%, 60%);--spruce-base-color-secondary: hsl(227, 92%, 55%);--spruce-base-color-text: hsl(0, 0%, 97%)}:root[data-theme-mode=dark]{--spruce-breadcrumb-color-arrow: hsla(0, 0%, 100%, 0.1)}:root[data-theme-mode=dark]{--spruce-btn-color-primary-background: hsl(186, 100%, 60%);--spruce-btn-color-primary-background-hover: hsl(186, 100%, 45%);--spruce-btn-color-primary-foreground: hsl(186, 100%, 5%);--spruce-btn-color-primary-shadow: hsl(186, 100%, 25%);--spruce-btn-color-secondary-background: hsl(227, 92%, 55%);--spruce-btn-color-secondary-background-hover: #3b64f7;--spruce-btn-color-secondary-foreground: hsl(0, 0%, 95%);--spruce-btn-color-secondary-shadow: #072bab}:root[data-theme-mode=dark]{--spruce-card-color-background: hsl(245, 38%, 11%)}:root[data-theme-mode=dark]{--spruce-container-color-background: hsl(207, 92%, 12%)}:root[data-theme-mode=dark]{--spruce-form-color-background: #1b1836;--spruce-form-color-background-disabled: hsl(245, 38%, 11%);--spruce-form-color-border-disabled: hsla(0, 0%, 100%, 0.08);--spruce-form-color-border-focus: hsl(186, 100%, 60%);--spruce-form-color-border: hsla(0, 0%, 100%, 0.08);--spruce-form-color-check-background: hsl(186, 100%, 60%);--spruce-form-color-check-foreground: hsl(245, 38%, 11%);--spruce-form-color-invalid: hsl(0, 71%, 51%);--spruce-form-color-invalid-shadow: rgba(219, 41, 41, 0.25);--spruce-form-color-label: hsl(0, 0%, 95%);--spruce-form-color-legend: hsl(0, 0%, 95%);--spruce-form-color-placeholder: hsl(0, 0%, 60%);--spruce-form-color-select-foreground: hsl(0, 0%, 100%);--spruce-form-color-shadow-focus: rgba(51, 235, 255, 0.25);--spruce-form-color-text: hsl(0, 0%, 97%);--spruce-form-color-valid: hsl(150, 100%, 33%);--spruce-form-color-valid-shadow: rgba(0, 168, 84, 0.25)}:root[data-theme-mode=dark]{--spruce-footer-color-background: hsl(245, 38%, 10%)}:root[data-theme-mode=dark]{--spruce-navigation-color-arrow: hsla(0, 0%, 100%, 0.15);--spruce-navigation-color-icon-background: hsl(245, 38%, 10%);--spruce-navigation-color-icon-background-hover: hsl(186, 100%, 60%);--spruce-navigation-color-icon-foreground: hsl(186, 100%, 60%);--spruce-navigation-color-icon-foreground-hover: hsl(186, 100%, 5%)}:root[data-theme-mode=dark]{--spruce-prism-color-color: hsl(217, 34%, 88%);--spruce-prism-color-background: hsl(245, 38%, 7%);--spruce-prism-color-comment: hsl(180, 9%, 55%);--spruce-prism-color-punctuation: hsl(276, 68%, 75%);--spruce-prism-color-namespace: hsl(197, 31%, 77%);--spruce-prism-color-deleted: hsla(1, 83%, 63%, 0.56);--spruce-prism-color-boolean: hsl(350, 100%, 67%);--spruce-prism-color-number: hsl(14, 90%, 70%);--spruce-prism-color-constant: hsl(221, 100%, 75%);--spruce-prism-color-class-name: hsl(33, 100%, 77%);--spruce-prism-color-regex: hsl(217, 34%, 88%)}:root[data-theme-mode=dark]{--spruce-table-color-border: hsla(0, 0%, 100%, 0.08);--spruce-table-color-caption: hsl(0, 0%, 97%);--spruce-table-color-heading: hsl(0, 0%, 95%);--spruce-table-color-hover: hsla(0, 0%, 100%, 0.05);--spruce-table-color-stripe: hsla(0, 0%, 100%, 0.025);--spruce-table-color-text: hsl(0, 0%, 97%)}:root[data-theme-mode=dark]{--spruce-selection-color-background: hsl(186, 100%, 60%);--spruce-selection-color-foreground: hsl(186, 100%, 5%)}:root[data-theme-mode=dark]{--spruce-search-color-icon: hsla(0, 0%, 100%, 0.25)}:root[data-theme-mode=dark]{--spruce-scrollbar-color-thumb-background: hsla(0, 0%, 100%, 0.15);--spruce-scrollbar-color-thumb-background-hover: hsla(0, 0%, 100%, 0.25);--spruce-scrollbar-color-track-background: hsla(0, 0%, 100%, 0.05)}[data-theme-mode=dark]{color-scheme:dark}[data-theme-mode=dark] select.form-control:not([multiple]):not([size]){background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12,12.507l-3.816,-3.815c-0.171,-0.172 -0.45,-0.172 -0.622,-0l-0.933,0.933c-0.172,0.172 -0.172,0.451 0,0.623l5.06,5.06c0.172,0.172 0.45,0.172 0.622,0l5.06,-5.06c0.172,-0.172 0.172,-0.451 -0,-0.623l-0.933,-0.933c-0.172,-0.172 -0.451,-0.172 -0.622,-0l-3.816,3.815Z" style="fill:hsl%280, 0%, 100%%29;"/%3e%3c/svg%3e')}.container{--inline-size: var(--spruce-container-inline-size);--gap: var(--spruce-container-gap);inline-size:100%;margin-inline:auto;max-inline-size:var(--inline-size);padding-inline:var(--gap)}.container--wide{--inline-size: 94rem}.container--narrow{--inline-size: 50rem}.l-main{--gtc: minmax(0, 1fr);display:grid;gap:3rem;grid-template-columns:var(--gtc);margin-block:clamp(1.5rem, 5vw, 3rem) clamp(3rem, 5vw, 4.5rem)}@media(min-width: 48em){.l-main{--gtc: minmax(0, 16rem) minmax(0, 1fr);gap:calc(var(--spruce-container-gap) * 1.5)}}@media(min-width: 64em){.l-main{--gtc: minmax(0, 18.5rem) minmax(0, 1fr)}}@media(min-width: 80em){.l-main{--gtc: minmax(0, 20rem) minmax(0, 1fr)}}.l-main__sidebar{display:none !important}@media(min-width: 48em){.l-main__sidebar{border-inline-end:1px solid var(--spruce-base-color-border);display:flex !important;inset-block-start:3rem;max-block-size:calc(100vh - 3rem * 2);position:sticky}}.l-main__sidebar--open{display:flex !important}.l-main__body{display:flex;flex-direction:column;inline-size:100%;margin-inline:auto;max-inline-size:var(--spruce-max-content-inline-size)}.l-card{--columns: 1;counter-reset:card;display:grid;gap:3rem;grid-template-columns:repeat(var(--columns), minmax(0, 1fr))}@media(min-width: 80em){.l-card{--columns: 2}}.l-front-page{display:grid;gap:4.5rem;grid-template-columns:minmax(0, 1fr)}.l-post{--gtc: minmax(0, 1fr);display:grid;gap:var(--spruce-container-gap);grid-template-columns:var(--gtc)}@media(min-width: 80em){.l-post{--gtc: minmax(0, 1fr) minmax(0, 15rem)}}@media(min-width: 80em){.l-post__toc{order:2}}.l-post__toc .toc{inset-block-start:3rem;position:sticky}@media(min-width: 80em){.l-post .post-heading{grid-column:1/3}}.l-list{--gtc: minmax(0, 1fr);display:grid;gap:3rem;grid-template-columns:var(--gtc)}.l-list__inner--changelog>*,.l-list__inner--faq>*{margin-block-end:0;margin-block-start:0}.l-list__inner--changelog>*+*,.l-list__inner--faq>*+*{margin-block-start:3rem}.header{align-items:center;border-block-end:1px solid var(--spruce-base-color-border);display:flex;flex-wrap:wrap;gap:1rem clamp(1.5rem, 5vw, 3rem);justify-content:space-between;order:2;padding-block:1.75rem}@media(min-width: 48em){.header{order:-1}}.header__column{align-items:center;display:flex;flex-grow:1;gap:clamp(1.5rem, 5vw, 3rem);justify-content:space-between}@media(min-width: 48em){.header__column{justify-content:flex-start}}.header__logo{display:inline-flex}.header__logo img,.header__logo svg{block-size:2rem;display:inline-flex;inline-size:auto}.header__toggle{--spruce-border-radius:1rem 1rem 0 1rem}@media(min-width: 48em){.header__toggle{display:none}}.header__actions{align-items:center;display:flex;flex-wrap:wrap;gap:clamp(1rem, 5vw, 1.5rem);margin-inline-start:auto}.header__navigation{display:none}@media(min-width: 48em){.header__navigation{display:flex}}.header__navigation ul{list-style:none;margin:0;padding:0;align-items:center;background-color:rgba(0,0,0,0);display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem 1.5rem;inset:auto;padding:0;position:relative}@media(min-width: 80em){.header__navigation ul{gap:.5rem 3rem}}.header__navigation li{margin-block:0}.header__navigation a{align-items:center;color:var(--spruce-base-color-heading);display:flex;gap:.5rem;text-decoration:none}.header__navigation a:hover{color:var(--spruce-base-color-primary)}.header__navigation a[aria-current=page]{font-weight:700}.header__navigation svg{--dimension: 0.65em;block-size:var(--dimension);color:var(--spruce-navigation-color-arrow);inline-size:var(--dimension)}.header__socials{align-items:center;display:flex;gap:1rem}.header__socials a{color:var(--spruce-base-color-heading);display:inline-flex}.header__socials a:hover,.header__socials a:focus{color:var(--spruce-base-color-primary)}.header__socials svg{--dimension: 1.25rem;block-size:var(--dimension);inline-size:var(--dimension)}.footer{--logo-block-size: 4rem;--logo-inline-size: 4rem;border-block-start:1px solid var(--spruce-base-color-border);margin-block-start:clamp(3rem, 5vw, 4.5rem);padding-block-start:clamp(3rem, 5vw, 4.5rem)}.footer__inner{display:grid;gap:3rem}@supports(inline-size: min(12rem, 100%)){.footer__inner{grid-template-columns:repeat(auto-fit, minmax(min(12rem, 100%), 1fr))}}.footer__logo{block-size:var(--logo-block-size);display:flex;inline-size:var(--logo-inline-size)}.footer__title{font-size:clamp(1.0625rem, 2vw + 1rem, 1.25rem)}.footer__navigation{list-style:none;margin:0;padding:0}.footer__navigation>*{margin-block-end:0;margin-block-start:0}.footer__navigation>*+*{margin-block-start:.5rem}.footer__navigation a{align-items:center;color:var(--spruce-base-color-text);display:inline-flex;gap:.5rem;text-decoration:none}.footer__navigation a:hover,.footer__navigation a:focus,.footer__navigation a:active,.footer__navigation a[aria-current=page]{color:var(--spruce-base-color-primary)}.footer__navigation a[aria-current=page]{font-weight:700}.footer__navigation a svg{--dimension: 0.65em;block-size:var(--dimension);color:var(--spruce-navigation-color-arrow);inline-size:var(--dimension)}.footer__column>*{margin-block-end:0;margin-block-start:0}.footer__column>*+*{margin-block-start:1.5rem}.skip-link{inset:-50vh auto auto 1.5rem;position:fixed;z-index:100}.skip-link:focus{inset-block-start:1.5rem}.breadcrumb-list{list-style:none;margin:0;padding:0;align-items:center;display:flex;max-inline-size:100%;overflow-x:auto;white-space:nowrap}.breadcrumb-list>li{align-items:center;display:inline-flex;margin-block:0}.breadcrumb-list>li+li::before{block-size:.4em;border-block-end:2px solid var(--spruce-breadcrumb-color-separator);border-inline-end:2px solid var(--spruce-breadcrumb-color-separator);content:"";display:inline-flex;inline-size:.4em;margin-inline:.75em;transform:rotate(-45deg)}[dir=rtl] .breadcrumb-list>li+li::before{transform:rotate(45deg)}.breadcrumb-list a{text-decoration:none}.breadcrumb-list [aria-current=page]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-inline-size:20ch;text-align:start}.open-search{position:relative;align-items:center;display:flex;gap:.5rem}.open-search__btn::before{content:"";inset:0;position:absolute}.open-search__icon{--dimension: 1rem;block-size:var(--dimension);color:var(--spruce-search-color-icon);inline-size:var(--dimension)}.no-transition *{transition:none !important}.theme-switcher{color:var(--spruce-base-color-text);display:inline-flex;position:relative}.theme-switcher[data-theme-mode=system] .theme-switcher__system-mode{display:flex}.theme-switcher[data-theme-mode=light] .theme-switcher__light-mode{display:flex}.theme-switcher[data-theme-mode=dark] .theme-switcher__dark-mode{display:flex}.theme-switcher button{display:none}.theme-switcher button>*{pointer-events:none}.post-heading>*{margin-block-end:0;margin-block-start:0}.post-heading>*+*{margin-block-start:1rem}.post-heading__headline{color:var(--spruce-base-color-primary);font-family:var(--spruce-font-family-heading);font-weight:700;letter-spacing:.1em;text-transform:uppercase}.post-heading__title{font-size:clamp(2.45rem, 4.5vw, 3.5rem);line-height:var(--spruce-line-height-sm);margin-block-start:.5rem;max-inline-size:20ch}.post-heading__description{font-size:var(--spruce-font-size-lead);max-inline-size:60ch}.post-heading__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-block-start:1.5rem}.post-content>*{margin-block-end:0;margin-block-start:0}.post-content>*+*{margin-block-start:1.5rem}@media(min-width: 64em){.post-content{font-size:1.0375rem}}.post-content :is(dd,dl,dl,h1,h2,h3:not(.accordion-card__title),h4,h5,h6,hr,ul,ol,p,blockquote){max-inline-size:40rem}.post-content *+h2,.post-content *+h3{margin-top:3rem}.post-content h2+*,.post-content h3+*,.post-content h4+*,.post-content h5+*,.post-content h6+*{margin-top:1rem}.post-content h2[id]{align-items:flex-start;display:flex;justify-content:space-between}.post-content h2[id]:hover .anchor,.post-content h2[id]:focus-within .anchor{opacity:1}.post-content h2[id] .anchor{font-weight:600;opacity:0;text-decoration:none}.post-content img,.post-content iframe{border-radius:var(--spruce-border-radius-sm)}.post-content iframe{aspect-ratio:16/9}.post-content a>code{color:var(--spruce-base-color-link)}.post-content strong{color:var(--spruce-base-color-heading)}.post-content picture{display:flex}.toc>*{margin-block-end:0;margin-block-start:0}.toc>*+*{margin-block-start:1rem}.toc__title{font-size:clamp(1.0625rem, 2vw + 1rem, 1.25rem)}.toc__navigation ol{list-style:none;margin:0;padding:0}.toc__navigation ol>*{margin-block-end:0;margin-block-start:0}.toc__navigation ol>*+*{margin-block-start:.5rem}.toc__navigation a{color:var(--spruce-base-color-text);text-decoration:none}.toc__navigation a:hover,.toc__navigation a:focus{color:var(--spruce-base-color-primary)}.sidebar{display:flex;flex-direction:column;gap:1.5rem}@media(min-width: 48em){.sidebar{padding-inline-end:var(--spruce-container-gap)}}.sidebar__footer{align-items:center;display:flex;justify-content:space-between}.sidebar__body{display:flex;flex-direction:column;flex-grow:1;gap:1.5rem;max-block-size:calc(100vh - var(--dimension) - 1.5rem * 3);overflow-y:auto}.sidebar__body::-webkit-scrollbar{block-size:.5rem;inline-size:.5rem}.sidebar__body::-webkit-scrollbar-thumb{background:var(--spruce-scrollbar-color-thumb-background);border-radius:.05rem}.sidebar__body::-webkit-scrollbar-thumb:hover{background:var(--spruce-scrollbar-color-thumb-background-hover)}.sidebar__body::-webkit-scrollbar-track{background:var(--spruce-scrollbar-color-track-background);border-radius:.05rem}@media(min-width: 48em){.sidebar__body{max-block-size:initial}}@media(min-width: 48em){.sidebar-section--navigation{display:none}}.sidebar-section__title{color:var(--spruce-base-color-heading);font-size:var(--spruce-font-size-base);margin-block:0}.sidebar-section__navigation{border-inline-start:1px solid var(--spruce-base-color-border);font-size:1rem;margin-block-start:1rem;padding-inline-start:1rem}.sidebar-section__navigation ul{list-style:none;margin:0;padding:0}.sidebar-section__navigation a{align-items:center;color:var(--spruce-base-color-text);display:inline-flex;gap:.5rem;text-decoration:none}.sidebar-section__navigation a[aria-current=page]{color:var(--spruce-base-color-heading);font-weight:700;position:relative}.sidebar-section__navigation a[aria-current=page]::before{background-color:var(--spruce-base-color-primary);border-end-end-radius:var(--spruce-border-radius-sm);border-start-end-radius:var(--spruce-border-radius-sm);content:"";inline-size:.3rem;inset-block:0;inset-inline-start:-1rem;position:absolute}.sidebar-section__navigation a svg{--dimension: 0.65em;block-size:var(--dimension);color:var(--spruce-navigation-color-arrow);inline-size:var(--dimension)}.post-card{position:relative;background-color:var(--spruce-card-color-background);border:1px solid var(--spruce-base-color-border);border-radius:var(--spruce-border-radius-sm);padding:3rem clamp(1.5rem, 5vw, 3rem)}.post-card>*{margin-block-end:0;margin-block-start:0}.post-card>*+*{margin-block-start:1rem}.card__link::before{content:"";inset:0;position:absolute}.post-card__serial-number{color:var(--spruce-base-color-primary);font-family:var(--spruce-font-family-heading);font-size:clamp(2.8rem, 4vw + 1rem, 4rem);font-weight:800;line-height:.8}.post-card__serial-number::before{content:counter(card, decimal-leading-zero);counter-increment:card}.post-card__title{font-size:clamp(1.328125rem, 2vw + 1rem, 1.5625rem)}code[class*=language-],pre[class*=language-]{border-radius:var(--spruce-border-radius-sm);color:var(--spruce-prism-color-color);font-family:var(--spruce-font-family-cursive);font-size:var(--spruce-font-size-base);hyphens:none;line-height:1.5;tab-size:4;text-align:left;white-space:pre;word-break:normal;word-spacing:normal;word-wrap:normal}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{display:grid;overflow:auto;padding:1.5rem}pre[class*=language-] code{background-color:rgba(0,0,0,0);padding:0}:not(pre)>code[class*=language-],pre[class*=language-]{background:var(--spruce-prism-color-background);overflow-x:auto}.token.comment,.token.prolog,.token.cdata{color:var(--spruce-prism-color-comment);font-style:italic}.token.punctuation{color:var(--spruce-prism-color-punctuation)}.namespace{color:var(--spruce-prism-color-namespace)}.token.deleted{color:var(--spruce-prism-color-deleted);font-style:italic}.token.symbol,.token.operator,.token.keyword,.token.property{color:var(--spruce-prism-color-namespace)}.token.tag{color:var(--spruce-prism-color-punctuation)}.token.boolean{color:var(--spruce-prism-color-boolean)}.token.number{color:var(--spruce-prism-color-number)}.token.constant,.token.builtin,.token.string,.token.url,.token.entity,.language-css .token.string,.style .token.string,.token.char{color:var(--spruce-prism-color-constant)}.token.selector,.token.function,.token.doctype{color:var(--spruce-prism-color-punctuation);font-style:italic}.token.attr-name,.token.inserted{color:var(--spruce-prism-color-constant);font-style:italic}.token.class-name,.token.atrule{color:var(--spruce-prism-color-class-name)}.token.regex,.token.important,.token.variable{color:var(--spruce-prism-color-regex)}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.modal-backdrop{backdrop-filter:blur(0.35rem);background-color:rgba(0,0,0,.35);display:none;inset:0;padding:1rem;position:fixed}.modal-backdrop--open{display:block}.modal{background-color:var(--spruce-base-color-background);border-radius:var(--spruce-border-radius-sm);box-shadow:var(--spruce-box-shadow);margin-block:7rem;margin-inline:auto;max-inline-size:40rem;padding:clamp(1rem, 5vw, 1.5rem)}.pagefind-ui__search-input{--webkit-date-line-height: 1.375;--spruce-border-radius: 0.425rem;--spruce-border-width: 1px;--spruce-font-size: 1rem;--spruce-line-height: 1.5;--spruce-padding: 0.5em 0.75em;--spruce-textarea-block-size: 6rem;appearance:none;background-color:var(--spruce-form-color-background);border:var(--spruce-border-width) solid var(--spruce-form-color-border);border-radius:var(--spruce-border-radius);box-sizing:border-box;color:var(--spruce-form-color-text);display:block;font-size:var(--spruce-font-size);inline-size:100%;line-height:var(--spruce-line-height);padding:var(--spruce-padding);transition-duration:var(--spruce-duration);transition-property:border,box-shadow;transition-timing-function:var(--spruce-timing-function)}.pagefind-ui__search-input::placeholder{color:var(--spruce-form-color-placeholder)}.pagefind-ui__search-input::-webkit-datetime-edit{line-height:var(--webkit-date-line-height)}.pagefind-ui__search-input:focus{border-color:var(--spruce-form-color-border-focus);box-shadow:0 0 0 .25rem var(--spruce-form-color-ring-focus);outline:2px solid rgba(0,0,0,0)}.pagefind-ui__search-input[type=color]{--spruce-aspect-ratio: 1;--spruce-block-size: 100%;--spruce-inline-size: 2.625rem;--spruce-padding: 0.5em;aspect-ratio:var(--spruce-aspect-ratio);block-size:var(--spruce-block-size);inline-size:var(--spruce-inline-size);padding:var(--spruce-padding)}.pagefind-ui__search-input[type=color]::-webkit-color-swatch-wrapper{padding:0}.pagefind-ui__search-input[type=color]::-moz-color-swatch{border:0;border-radius:var(--spruce-border-radius)}.pagefind-ui__search-input[type=color]::-webkit-color-swatch{border:0;border-radius:var(--spruce-border-radius)}.pagefind-ui__search-input[disabled],.pagefind-ui__search-input[disabled=true]{background-color:var(--spruce-form-color-background-disabled);border-color:var(--spruce-form-color-border-disabled);cursor:not-allowed}textarea.pagefind-ui__search-input{block-size:var(--spruce-textarea-block-size);min-block-size:var(--spruce-textarea-block-size);resize:vertical}.pagefind-ui{position:relative}.pagefind-ui__search-input{padding:.5em .75em !important}.pagefind-ui__form>*{margin-block-end:0;margin-block-start:0}.pagefind-ui__form>*+*{margin-block-start:1rem}.pagefind-ui__search-clear{background:none;border:0;font-size:var(--spruce-font-size-sm);inset-block-start:.8em;inset-inline-end:.5em;margin-block-start:0;position:absolute;text-transform:uppercase}.pagefind-ui__drawer{max-block-size:20rem;overflow-y:auto}.pagefind-ui__drawer::-webkit-scrollbar{block-size:.5rem;inline-size:.5rem}.pagefind-ui__drawer::-webkit-scrollbar-thumb{background:var(--spruce-scrollbar-color-thumb-background);border-radius:var(--spruce-border-radius-sm)}.pagefind-ui__drawer::-webkit-scrollbar-thumb:hover{background:var(--spruce-scrollbar-color-thumb-background-hover)}.pagefind-ui__drawer::-webkit-scrollbar-track{background:var(--spruce-scrollbar-color-track-background);border-radius:var(--spruce-border-radius-sm)}.pagefind-ui__results{list-style:none;margin:0;padding:0;padding-inline-end:1.5rem}.pagefind-ui__results>*{margin-block-end:0;margin-block-start:0}.pagefind-ui__results>*+*{margin-block-start:1rem}.pagefind-ui__results:empty{display:none}.pagefind-ui__results-area>*{margin-block-end:0;margin-block-start:0}.pagefind-ui__results-area>*+*{margin-block-start:.5rem}.pagefind-ui__result-inner>*{margin-block-end:0;margin-block-start:0}.pagefind-ui__result-inner>*+*{margin-block-start:.25rem}.pagefind-ui__result-title{font-weight:700}.pagefind-ui__hidden{display:none}.accordion-list>*{margin-block-end:0;margin-block-start:0}.accordion-list>*+*{margin-block-start:1rem}.accordion-card{background-color:var(--spruce-base-color-background);border:1px solid var(--spruce-base-color-border);border-radius:var(--spruce-border-radius-sm);max-inline-size:75ch}.accordion-card--js .accordion-card__title{padding:0}.accordion-card__title{font-family:var(--spruce-font-family-base);font-size:clamp(1.0625rem, 2vw + 1rem, 1.25rem);margin-block:0;padding:1.5rem}.accordion-card__toggle{background:none;border:0;color:inherit;cursor:pointer;font:inherit;outline:inherit;padding:0;align-items:center;display:flex;gap:1.5rem;inline-size:100%;justify-content:space-between;padding:1.5rem;text-align:start}.accordion-card__toggle:focus-visible svg{outline:2px solid var(--spruce-base-color-primary);outline-offset:2px}.accordion-card__toggle svg{--dimension: 1.75rem;background-color:var(--spruce-btn-color-primary-background);block-size:var(--dimension);border-radius:var(--spruce-border-radius-sm);color:var(--spruce-btn-color-primary-foreground);flex-shrink:0;inline-size:var(--dimension)}.accordion-card__toggle[aria-expanded=true] .vertical-line{display:none}.accordion-card__content{padding-block-end:1.5rem;padding-inline:1.5rem}.accordion-card__content>*{margin-block-end:0;margin-block-start:0}.accordion-card__content>*+*{margin-block-start:.5rem}.changelog-item{--gtc: minmax(0, 1fr);align-items:flex-start;display:grid;gap:1.5rem 3rem;grid-template-columns:var(--gtc)}@media(min-width: 64em){.changelog-item{--gtc: minmax(0, 9rem) minmax(0, 1fr)}}.changelog-item__date{background-color:var(--spruce-btn-color-primary-background);border-radius:var(--spruce-border-radius-sm);color:var(--spruce-btn-color-primary-foreground);display:inline-flex;flex-shrink:0;font-weight:700;justify-self:start;padding:.25rem 1rem}.changelog-item ul p{margin-block:0}.group>*{margin-block-end:0;margin-block-start:0}.group>*+*{margin-block-start:1.5rem}.post-navigation{align-items:center;border-block-start:1px solid var(--spruce-base-color-border);display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;margin-block-start:4.5rem;padding-block:1.5rem}.post-navigation-item{align-items:center;display:flex;gap:1rem;text-decoration:none}.post-navigation-item:hover .post-navigation-item__icon{background-color:var(--spruce-navigation-color-icon-background-hover);color:var(--spruce-navigation-color-icon-foreground-hover)}.post-navigation-item--next{margin-inline-start:auto;text-align:end}.post-navigation-item__icon{transition-duration:var(--spruce-duration);transition-property:all;transition-timing-function:var(--spruce-timing-function);align-items:center;background-color:var(--spruce-navigation-color-icon-background);block-size:3rem;border-radius:.425rem;color:var(--spruce-navigation-color-icon-foreground);display:flex;flex-shrink:0;inline-size:3rem;justify-content:center}.post-navigation-item__icon svg{--dimension: 1rem;block-size:var(--dimension);inline-size:var(--dimension)}[dir=rtl] .post-navigation-item__icon svg{transform:rotate(180deg)}.post-navigation-item__caption{color:var(--spruce-base-color-text);line-height:var(--spruce-line-height-md)}.post-navigation-item__title{color:var(--spruce-base-color-primary);display:flex;font-weight:700}:root{--spruce-section-gap:clamp(5rem, 7vw, 7rem);--spruce-container-gap:clamp(1.5rem, 5vw, 3rem);--spruce-max-content-inline-size:70rem;--spruce-box-shadow:0 0.75rem 1.25rem hsla(0, 0%, 0%, 0.05)} 2 | --------------------------------------------------------------------------------