diff --git a/.eleventy.js b/.eleventy.js index ce118c6..670c4c8 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -68,6 +68,7 @@ module.exports = config => { input: 'src', output: 'dist' }, - passthroughFileCopy: true + passthroughFileCopy: true, + pathPrefix: './', }; }; diff --git a/package-lock.json b/package-lock.json index 49e5ddc..6fc8cc6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "npm-run-all": "^4.1.5", "pagefind": "^0.12.0", "sass": "^1.66.1", - "sprucecss": "^2.2.2", + "sprucecss": "^2.3.0", "stylelint": "^15.10.3", "stylelint-config-sass-guidelines": "^10.0.0", "stylelint-order": "^6.0.3" @@ -5535,9 +5535,9 @@ "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==" }, "node_modules/sprucecss": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/sprucecss/-/sprucecss-2.2.2.tgz", - "integrity": "sha512-qzQxDPk3WKMFbvEIoA79guWiO7YeQz4g+7zv/NUACOg4fmebzChULZTdwt1u2ThLo5DKSIDfIWyHBsjN7JU/qg==" + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/sprucecss/-/sprucecss-2.3.0.tgz", + "integrity": "sha512-P8XdeBvM27peq55BzL1rWRY+2iZdVcvYj4UZnRLIy1yMqWVFmwT0Kg9e/Rh3p9I1mSefGozJRL6VoVuKbgh8hA==" }, "node_modules/ssri": { "version": "8.0.1", diff --git a/package.json b/package.json index be84572..0b2d1a1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sprucecss-eleventy-documentation-template", - "version": "1.1.0", + "version": "1.2.0", "author": "Cone (https://conedevelopment.com)", "main": ".eleventy.js", "scripts": { @@ -34,7 +34,7 @@ "npm-run-all": "^4.1.5", "pagefind": "^0.12.0", "sass": "^1.66.1", - "sprucecss": "^2.2.2", + "sprucecss": "^2.3.0", "stylelint": "^15.10.3", "stylelint-config-sass-guidelines": "^10.0.0", "stylelint-order": "^6.0.3" diff --git a/src/_includes/layouts/base.html b/src/_includes/layouts/base.html index acfd6b3..5c401c4 100644 --- a/src/_includes/layouts/base.html +++ b/src/_includes/layouts/base.html @@ -1,16 +1,14 @@ -{% set assetHash = global.random() %} - - + {% include "partials/preload.html" %} {% include "partials/meta.html" %} - +
@@ -28,10 +26,10 @@
{% include "partials/search-modal.html" %} - - - - - + + + + + diff --git a/src/_includes/layouts/front-page.html b/src/_includes/layouts/front-page.html index a9fe5ca..1e87e84 100644 --- a/src/_includes/layouts/front-page.html +++ b/src/_includes/layouts/front-page.html @@ -11,7 +11,7 @@

Overview

{{ post.title }}

{{ post.description }}

- + Read More {{ post.title }} diff --git a/src/_includes/layouts/list.html b/src/_includes/layouts/list.html index 0156e1f..28a19ed 100644 --- a/src/_includes/layouts/list.html +++ b/src/_includes/layouts/list.html @@ -10,7 +10,7 @@

{{ post.data.title }}

{{ post.data.summary }}

- + Read More {{ post.title }} diff --git a/src/_includes/partials/post-heading.html b/src/_includes/partials/post-heading.html index eef76b9..fbdce51 100644 --- a/src/_includes/partials/post-heading.html +++ b/src/_includes/partials/post-heading.html @@ -18,7 +18,7 @@

{% if btns %}
{% for btn in btns %} - {% set cls = 'btn--primary' %} + {% set cls = 'btn--primary btn--primary-shadow' %} {% if btn.type === 'outline' %} {% set cls = 'btn--outline-primary' %} {% endif %} diff --git a/src/css/main.css b/src/css/main.css index e35ca56..21f7f36 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -1,2201 +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 */ -/* Document - ========================================================================== */ -/** -* 1. Correct the line height in all browsers. -* 2. Prevent adjustments of font size after orientation changes in iOS. -*/ -html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/* Sections - ========================================================================== */ -/** -* Remove the margin in all browsers. -*/ -body { - margin: 0; -} - -/** -* Render the `main` element consistently in IE. -*/ -main { - display: block; -} - -/** -* Correct the font size and margin on `h1` elements within `section` and -* `article` contexts in Chrome, Firefox, and Safari. -*/ -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/* Grouping content - ========================================================================== */ -/** -* 1. Add the correct box sizing in Firefox. -* 2. Show the overflow in Edge and IE. -*/ -hr { - box-sizing: content-box; /* 1 */ - block-size: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** -* 1. Correct the inheritance and scaling of font size in all browsers. -* 2. Correct the odd `em` font sizing in all browsers. -*/ -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/* Text-level semantics - ========================================================================== */ -/** -* Remove the gray background on active links in IE 10. -*/ -a { - background-color: transparent; -} - -/** -* 1. Remove the bottom border in Chrome 57- -* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. -*/ -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** -* Add the correct font weight in Chrome, Edge, and Safari. -*/ -b, -strong { - font-weight: bolder; -} - -/** -* 1. Correct the inheritance and scaling of font size in all browsers. -* 2. Correct the odd `em` font sizing in all browsers. -*/ -code, -kbd, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** -* Add the correct font size in all browsers. -*/ -small { - font-size: 80%; -} - -/** -* Prevent `sub` and `sup` elements from affecting the line height in -* all browsers. -*/ -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ -/** -* Remove the border on images inside links in IE 10. -*/ -img { - border-style: none; -} - -/* Forms - ========================================================================== */ -/** -* 1. Change the font styles in all browsers. -* 2. Remove the margin in Firefox and Safari. -*/ -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} - -/** -* Show the overflow in IE. -* 1. Show the overflow in Edge. -*/ -button, -input { /* 1 */ - overflow: visible; -} - -/** -* Remove the inheritance of text transform in Edge, Firefox, and IE. -* 1. Remove the inheritance of text transform in Firefox. -*/ -button, -select { /* 1 */ - text-transform: none; -} - -/** -* Correct the inability to style clickable types in iOS and Safari. -*/ -button, -[type=button], -[type=reset], -[type=submit] { - -webkit-appearance: button; -} - -/** -* Remove the inner border and padding in Firefox. -*/ -button::-moz-focus-inner, -[type=button]::-moz-focus-inner, -[type=reset]::-moz-focus-inner, -[type=submit]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** -* Restore the focus styles unset by the previous rule. -*/ -button:-moz-focusring, -[type=button]:-moz-focusring, -[type=reset]:-moz-focusring, -[type=submit]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** -* Correct the padding in Firefox. -*/ -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** -* 1. Correct the text wrapping in Edge and IE. -* 2. Correct the color inheritance from `fieldset` elements in IE. -* 3. Remove the padding so developers are not caught out when they zero out -* `fieldset` elements in all browsers. -*/ -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-inline-size: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** -* Add the correct vertical alignment in Chrome, Firefox, and Opera. -*/ -progress { - vertical-align: baseline; -} - -/** -* Remove the default vertical scrollbar in IE 10+. -*/ -textarea { - overflow: auto; -} - -/** -* 1. Add the correct box sizing in IE 10. -* 2. Remove the padding in IE 10. -*/ -[type=checkbox], -[type=radio] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** -* Correct the cursor style of increment and decrement buttons in Chrome. -*/ -[type=number]::-webkit-inner-spin-button, -[type=number]::-webkit-outer-spin-button { - block-size: auto; -} - -/** -* 1. Correct the odd appearance in Chrome and Safari. -* 2. Correct the outline style in Safari. -*/ -[type=search] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** -* Remove the inner padding in Chrome and Safari on macOS. -*/ -[type=search]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** -* 1. Correct the inability to style clickable types in iOS and Safari. -* 2. Change font properties to `inherit` in Safari. -*/ -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* Interactive - ========================================================================== */ -/* -* Add the correct display in Edge, IE 10+, and Firefox. -*/ -details { - display: block; -} - -/* -* Add the correct display in all browsers. -*/ -summary { - display: list-item; -} - -/* Misc - ========================================================================== */ -/** -* Add the correct display in IE 10+. -*/ -template { - display: none; -} - -/** -* Add the correct display in IE 10. -*/ -[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-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-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-border-radius: 0.325rem; - --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.725rem; - --spruce-border-radius-sm: 0.325rem; - --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: 0.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: hsla(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: 0.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: 0.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: 0.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: 0.5rem; -} -.quote blockquote { - border-inline-start: 0; - padding-inline-start: 0; -} -.quote figcaption { - text-align: start; -} - -blockquote { - border-inline-start: 0.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: 0.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-inline-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-inline-border-radius); - color: var(--spruce-base-color-code-foreground); - padding: var(--spruce-inline-padding); -} - -.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.325rem; - --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: transparent; - outline-style: solid; -} - -.btn:disabled { - opacity: 0.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 0.55em 1em -0.2em var(--spruce-btn-color-primary-shadow), 0 0.15em 0.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 0.55em 1em -0.2em var(--spruce-btn-color-secondary-shadow), 0 0.15em 0.35em -0.185em var(--spruce-btn-color-secondary-shadow); -} - -.btn--outline-primary { - background-color: transparent; - 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: transparent; - 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.325rem; - --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]) { /* stylelint-disable-line */ - 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); - 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: transparent; - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: 0.5rem 1.5rem; - inset: auto; - padding: 0; - position: relative; -} -@media (min-width: 80em) { - .header__navigation ul { - gap: 0.5rem 3rem; - } -} -.header__navigation li { - margin-block: 0; -} -.header__navigation a { - align-items: center; - color: var(--spruce-base-color-heading); - display: flex; - gap: 0.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: 0.5rem; -} -.footer__navigation a { - align-items: center; - color: var(--spruce-base-color-text); - display: inline-flex; - gap: 0.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: 0.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: 0.4em; - margin-inline: 0.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: 0.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); -} - -.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: 0.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: 0.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); -} - -.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: 0.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: 0.5rem; - inline-size: 0.5rem; -} -.sidebar__body::-webkit-scrollbar-thumb { - background: var(--spruce-scrollbar-color-thumb-background); - border-radius: 0.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: 0.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: 0.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: 0.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: 0.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-lg); - 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; - } -} -/* Code blocks */ -pre[class*=language-] { - display: grid; - overflow: auto; - padding: 1.5rem; -} - -pre[class*=language-] code { - background-color: transparent; - 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: hsla(0, 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.325rem; - --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 0.25rem var(--spruce-form-color-ring-focus); - outline: 2px solid transparent; -} -.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: 0.5em 0.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: 0.8em; - inset-inline-end: 0.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: 0.5rem; - inline-size: 0.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: 0.5rem; -} -.pagefind-ui__result-inner > * { - margin-block-end: 0; - margin-block-start: 0; -} -.pagefind-ui__result-inner > * + * { - margin-block-start: 0.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: 0.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: 0.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: 0.325rem; - 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); -} +@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)} diff --git a/src/img/cover/sprucecss-light.png b/src/img/cover/sprucecss-light.png new file mode 100644 index 0000000..ddae298 Binary files /dev/null and b/src/img/cover/sprucecss-light.png differ diff --git a/src/img/cover/sprucecss.png b/src/img/cover/sprucecss.png index 48991a3..6de780b 100644 Binary files a/src/img/cover/sprucecss.png and b/src/img/cover/sprucecss.png differ diff --git a/src/js/theme-switcher.js b/src/js/theme-switcher.js index 71fc20b..cc85d16 100644 --- a/src/js/theme-switcher.js +++ b/src/js/theme-switcher.js @@ -2,6 +2,10 @@ const themeSwitcher = document.querySelector('#theme-switcher'); const preferredTheme = localStorage.getItem('preferred-theme') ?? 'system'; + if (!themeSwitcher) { + return; + } + themeSwitcher.addEventListener('click', (e) => { if (!e.target.matches('[data-action]')) { return; @@ -9,11 +13,13 @@ const theme = e.target.getAttribute('data-action'); const systemMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + document.documentElement.classList.add('no-transition'); localStorage.setItem('preferred-theme', theme); document.documentElement.setAttribute('data-theme-mode', theme === 'system' ? systemMode : theme); themeSwitcher.setAttribute('data-theme-mode', theme); themeSwitcher.querySelector(`.theme-switcher__${theme}-mode`).focus(); + document.documentElement.classList.remove('no-transition'); }); themeSwitcher.setAttribute('data-theme-mode', preferredTheme); diff --git a/src/posts/getting-started/posts/introduction.md b/src/posts/getting-started/posts/introduction.md index 28e2e79..0752e0e 100644 --- a/src/posts/getting-started/posts/introduction.md +++ b/src/posts/getting-started/posts/introduction.md @@ -19,4 +19,10 @@ By structure, it is simple, with two levels and additional custom templates like 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. -![A minimalistic, low-level CSS framework](/img/cover/sprucecss.png) +A minimalistic, low-level CSS framework diff --git a/src/scss/component/_post-content.scss b/src/scss/component/_post-content.scss index f6b10a8..9c96025 100644 --- a/src/scss/component/_post-content.scss +++ b/src/scss/component/_post-content.scss @@ -57,4 +57,8 @@ strong { color: color('heading'); } + + picture { + display: flex; + } } diff --git a/src/scss/component/_prism.scss b/src/scss/component/_prism.scss index c5b1643..e41d5e9 100644 --- a/src/scss/component/_prism.scss +++ b/src/scss/component/_prism.scss @@ -2,7 +2,7 @@ code[class*='language-'], pre[class*='language-'] { - border-radius: config('border-radius-lg', $display); + border-radius: config('border-radius-sm', $display); color: color('color', 'prism'); font-family: config('font-family-cursive', $typography); font-size: config('font-size-base', $typography); diff --git a/src/scss/component/_theme-switcher.scss b/src/scss/component/_theme-switcher.scss index 1ec1852..fe859e2 100644 --- a/src/scss/component/_theme-switcher.scss +++ b/src/scss/component/_theme-switcher.scss @@ -1,5 +1,11 @@ @use 'sprucecss/scss/spruce' as *; +.no-transition { + * { + transition: none !important; + } +} + .theme-switcher { color: color('text'); display: inline-flex;