diff --git a/src/css/main.css b/src/css/main.css index b0d2d4e..a4c7b80 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -360,11 +360,11 @@ template { --spruce-base-color-background: hsl(0, 0%, 100%); --spruce-base-color-blockquote-border: hsl(262, 71%, 49%); --spruce-base-color-border: hsl(215, 63%, 93%); - --spruce-base-color-code-background: #f6f2fd; + --spruce-base-color-code-background: hsl(262, 71%, 97%); --spruce-base-color-code-foreground: hsl(260, 70%, 6%); --spruce-base-color-heading: hsl(260, 70%, 6%); --spruce-base-color-link: hsl(262, 71%, 49%); - --spruce-base-color-link-hover: #511dab; + --spruce-base-color-link-hover: hsl(262, 71%, 39.2%); --spruce-base-color-mark-background: hsl(50, 100%, 80%); --spruce-base-color-mark-foreground: hsl(260, 70%, 6%); --spruce-base-color-marker: hsl(262, 71%, 49%); @@ -380,13 +380,13 @@ template { :root { --spruce-btn-color-primary-background: hsl(262, 71%, 49%); - --spruce-btn-color-primary-background-hover: #511daa; + --spruce-btn-color-primary-background-hover: hsl(262, 71%, 39%); --spruce-btn-color-primary-foreground: hsl(0, 0%, 100%); - --spruce-btn-color-primary-shadow: #ceb9f3; + --spruce-btn-color-primary-shadow: hsl(262, 71%, 84%); --spruce-btn-color-secondary-background: hsl(227, 92%, 55%); - --spruce-btn-color-secondary-background-hover: #0937dc; + --spruce-btn-color-secondary-background-hover: hsl(227, 92%, 45%); --spruce-btn-color-secondary-foreground: hsl(0, 0%, 100%); - --spruce-btn-color-secondary-shadow: #ced8fd; + --spruce-btn-color-secondary-shadow: hsl(227, 92%, 90%); --spruce-btn-color-dark-background: hsl(260, 70%, 6%); --spruce-btn-color-dark-background-hover: hsl(260, 70%, 12%); --spruce-btn-color-dark-foreground: hsl(0, 0%, 100%); @@ -418,21 +418,21 @@ template { --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-invalid-focus-ring: hsla(0, 71%, 51%, 0.25); --spruce-form-color-label: hsl(260, 70%, 6%); --spruce-form-color-legend: hsl(260, 70%, 6%); --spruce-form-color-placeholder: hsl(208, 7%, 40%); --spruce-form-color-range-thumb-background: hsl(262, 71%, 49%); --spruce-form-color-range-thumb-focus-ring: hsl(262, 71%, 49%); --spruce-form-color-range-track-background: hsl(215, 63%, 93%); - --spruce-form-color-ring-focus: rgba(101, 36, 214, 0.25); + --spruce-form-color-ring-focus: hsla(262, 71%, 49%, 0.25); --spruce-form-color-select-foreground: hsl(260, 70%, 6%); --spruce-form-color-switch-background: hsl(262, 71%, 49%); --spruce-form-color-switch-focus-ring: hsl(262, 71%, 49%); --spruce-form-color-switch-foreground: hsl(0, 0%, 100%); --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); + --spruce-form-color-valid-focus-ring: hsla(150, 100%, 33%, 0.25); } :root { @@ -1623,7 +1623,7 @@ legend { --spruce-base-color-code-tab-background: hsla(0, 0%, 0%, 0.15); --spruce-base-color-heading: hsl(0, 0%, 95%); --spruce-base-color-link: hsl(261, 54%, 70%); - --spruce-base-color-link-hover: #b8a1e3; + --spruce-base-color-link-hover: hsl(261, 54%, 76%); --spruce-base-color-mark-background: hsl(50, 100%, 80%); --spruce-base-color-mark-foreground: hsl(206, 100%, 7%); --spruce-base-color-marker: hsl(261, 54%, 70%); @@ -1648,15 +1648,15 @@ legend { --spruce-btn-color-primary-background: hsl(261, 52%, 59%); --spruce-btn-color-primary-background-hover: hsl(261, 52%, 65%); --spruce-btn-color-primary-foreground: hsl(0, 0%, 95%); - --spruce-btn-color-primary-shadow: #6035b1; + --spruce-btn-color-primary-shadow: hsl(261, 54%, 45%); --spruce-btn-color-secondary-background: hsl(227, 92%, 55%); - --spruce-btn-color-secondary-background-hover: #3b64f7; + --spruce-btn-color-secondary-background-hover: hsl(227, 92%, 60%); --spruce-btn-color-secondary-foreground: hsl(0, 0%, 95%); - --spruce-btn-color-secondary-shadow: #072bab; + --spruce-btn-color-secondary-shadow: hsl(227, 92%, 35%); } :root[data-theme-mode=dark] { - --spruce-form-color-background: #00223b; + --spruce-form-color-background: hsl(206, 100%, 11.65%); --spruce-form-color-background-disabled: hsl(206, 100%, 7%); --spruce-form-color-border: hsla(0, 0%, 100%, 0.08); --spruce-form-color-border-disabled: hsla(0, 0%, 100%, 0.08); @@ -1665,18 +1665,18 @@ legend { --spruce-form-color-check-focus-ring: hsl(261, 54%, 70%); --spruce-form-color-check-foreground: hsl(206, 100%, 7%); --spruce-form-color-invalid: hsl(0, 71%, 51%); - --spruce-form-color-invalid-focus-ring: rgba(219, 41, 41, 0.25); + --spruce-form-color-invalid-focus-ring: hsla(0, 71%, 51%, 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-range-thumb-background: hsl(261, 54%, 70%); --spruce-form-color-range-thumb-focus-ring: hsl(261, 54%, 70%); --spruce-form-color-range-track-background: hsla(0, 0%, 100%, 0.08); - --spruce-form-color-ring-focus: rgba(166, 137, 220, 0.25); + --spruce-form-color-ring-focus: hsla(261, 54%, 70%, 0.25); --spruce-form-color-select-foreground: hsl(0, 0%, 100%); --spruce-form-color-text: hsl(0, 0%, 97%); --spruce-form-color-valid: hsl(150, 100%, 33%); - --spruce-form-color-valid-focus-ring: rgba(0, 168, 84, 0.25); + --spruce-form-color-valid-focus-ring: hsla(150, 100%, 33%, 0.25); } :root[data-theme-mode=dark] { @@ -1824,7 +1824,7 @@ legend { .cookie-consent { --spruce-base-color-text: hsl(0, 0%, 97%); --spruce-base-color-link: hsl(261, 54%, 70%); - --spruce-base-color-link-hover: #b8a1e3; + --spruce-base-color-link-hover: hsl(261, 54%, 76%); align-items: center; background-color: hsl(260, 70%, 6%); border-radius: var(--spruce-border-radius-lg); @@ -2596,8 +2596,8 @@ textarea.pagefind-ui__search-input { text-transform: uppercase; } .template-tag--free { - background-color: #dbffed; - color: #005c2e; + background-color: hsl(150, 100%, 93%); + color: hsl(150, 100%, 18%); } .template-actions { @@ -2651,7 +2651,7 @@ textarea.pagefind-ui__search-input { border: 1px solid; } .notification--info { - background-color: rgba(0, 161, 214, 0.1); + background-color: hsla(195, 100%, 42%, 0.1); border-block-start: 0.5rem solid var(--spruce-alert-color-info); } .notification--info .notification__icon { @@ -2660,10 +2660,10 @@ textarea.pagefind-ui__search-input { .notification--info code, .notification--info kbd, .notification--info samp { - border-color: rgba(0, 161, 214, 0.5); + border-color: hsla(195, 100%, 42%, 0.5); } .notification--good { - background-color: rgba(0, 168, 84, 0.1); + background-color: hsla(150, 100%, 33%, 0.1); border-block-start: 0.5rem solid var(--spruce-alert-color-success); } .notification--good .notification__icon { @@ -2672,10 +2672,10 @@ textarea.pagefind-ui__search-input { .notification--good code, .notification--good kbd, .notification--good samp { - border-color: rgba(0, 168, 84, 0.5); + border-color: hsla(150, 100%, 33%, 0.5); } .notification--bad { - background-color: rgba(219, 41, 41, 0.1); + background-color: hsla(0, 71%, 51%, 0.1); border-block-start: 0.5rem solid var(--spruce-alert-color-danger); } .notification--bad .notification__icon { @@ -2684,7 +2684,7 @@ textarea.pagefind-ui__search-input { .notification--bad code, .notification--bad kbd, .notification--bad samp { - border-color: rgba(219, 41, 41, 0.5); + border-color: hsla(0, 71%, 51%, 0.5); } .notification__content > * { margin-block-end: 0; @@ -3684,7 +3684,7 @@ pre[class*=language-] { color: hsl(261, 54%, 70%); } .site-footer a:hover, .site-footer a:focus { - color: #b8a1e3; + color: hsl(261, 54%, 76%); } .site-footer__slogan { color: hsl(0, 0%, 100%); @@ -3741,7 +3741,7 @@ pre[class*=language-] { text-decoration: none; } .site-footer__navigation a:hover, .site-footer__navigation a:focus, .site-footer__navigation a:active, .site-footer__navigation a[aria-current=page] { - color: #b8a1e3; + color: hsl(261, 54%, 76%); } .site-footer__navigation a[aria-current=page] { font-weight: 700; @@ -4123,8 +4123,8 @@ pre[class*=language-] { outline-offset: 2px; } .btn--decline:hover { - background-color: #0b1319; - border-color: #0b1319; + background-color: hsl(207, 39%, 7%); + border-color: hsl(207, 39%, 7%); color: var(--spruce-btn-color-decline-foreground); } diff --git a/src/docs/customization/settings.md b/src/docs/customization/settings.md index 3103a91..ceefcb4 100644 --- a/src/docs/customization/settings.md +++ b/src/docs/customization/settings.md @@ -2,7 +2,7 @@ title: "Settings" description: "By changing the settings parameters, you can customize a generic part of the behavior of Spruce CSS." order: 11 -github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/customization/settings.mdx" +github: "https://github.com/conedevelopment/sprucecss-site-eleventy/blob/main/src/docs/customization/settings.mdx" ---

In Spruce CSS, the settings are global options controlled through a Sass map.

diff --git a/src/docs/customization/themes.md b/src/docs/customization/themes.md index 5eb100b..dda17d5 100644 --- a/src/docs/customization/themes.md +++ b/src/docs/customization/themes.md @@ -2,7 +2,7 @@ title: "Themes" description: "Create dark - or any additional - theme easily with Spruce CSS and custom CSS properties." order: 13 -github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/customization/themes.mdx" +github: "https://github.com/conedevelopment/sprucecss-site-eleventy/blob/main/src/docs/customization/themes.mdx" ---

Spruce uses CSS custom properties to handle the theming. It means that you can easily overwrite the colors if needed (like in a case of a dark theme mode).

diff --git a/src/docs/customization/variables.md b/src/docs/customization/variables.md index 3b73708..e8f54da 100644 --- a/src/docs/customization/variables.md +++ b/src/docs/customization/variables.md @@ -2,7 +2,7 @@ title: "Variables" description: "Spruce CSS is a highly customizable framework through variables. In this post, you will learn how to customize and get them." order: 10 -github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/customization/variables.mdx" +github: "https://github.com/conedevelopment/sprucecss-site-eleventy/blob/main/src/docs/customization/variables.mdx" ---

Spruce CSS is a highly customizable through variables. In this post, you will learn how to get and customize them.

diff --git a/src/docs/elements/buttons.md b/src/docs/elements/buttons.md index be3f0d3..fcc5441 100644 --- a/src/docs/elements/buttons.md +++ b/src/docs/elements/buttons.md @@ -1,7 +1,7 @@ --- title: "Buttons" order: 21 -github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/elements/buttons.mdx" +github: "https://github.com/conedevelopment/sprucecss-site-eleventy/blob/main/src/docs/elements/buttons.mdx" ---

Spruce comes with basic button variations like size, width, color, state and can also generate your custom color variants.

diff --git a/src/docs/elements/forms.md b/src/docs/elements/forms.md index 076a2ee..3707061 100644 --- a/src/docs/elements/forms.md +++ b/src/docs/elements/forms.md @@ -2,7 +2,7 @@ title: "Forms" description: "Spruce CSS comes with overall form support for styling the different native elements." order: 22 -github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/elements/forms.mdx" +github: "https://github.com/conedevelopment/sprucecss-site-eleventy/blob/main/src/docs/elements/forms.mdx" ---

Spruce CSS comes with overall form support for styling the different native elements. Also, it has some form layout helpers.

diff --git a/src/docs/elements/generators.md b/src/docs/elements/generators.md index a8fb64e..4e9bd5a 100644 --- a/src/docs/elements/generators.md +++ b/src/docs/elements/generators.md @@ -1,7 +1,7 @@ --- title: "Generators" order: 18 -github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/elements/generators.mdx" +github: "https://github.com/conedevelopment/sprucecss-site-eleventy/blob/main/src/docs/elements/generators.mdx" ---

The generators are special (a naming convention in Spruce CSS only) mixins, which we use to generate base styles.

diff --git a/src/docs/elements/media.md b/src/docs/elements/media.md index 03d207f..d0cae77 100644 --- a/src/docs/elements/media.md +++ b/src/docs/elements/media.md @@ -1,7 +1,7 @@ --- title: "Media" order: 23 -github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/elements/media.mdx" +github: "https://github.com/conedevelopment/sprucecss-site-eleventy/blob/main/src/docs/elements/media.mdx" ---

Under media, you can find some of the media-related styles.

diff --git a/src/docs/elements/tables.md b/src/docs/elements/tables.md index 85c68aa..65625a9 100644 --- a/src/docs/elements/tables.md +++ b/src/docs/elements/tables.md @@ -1,7 +1,7 @@ --- title: "Tables" order: 20 -github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/elements/tables.mdx" +github: "https://github.com/conedevelopment/sprucecss-site-eleventy/blob/main/src/docs/elements/tables.mdx" ---

Spruce ships with some basic table styling targeted only with classes to opt-in.

diff --git a/src/docs/elements/typography.md b/src/docs/elements/typography.md index ce2c099..b50b90d 100644 --- a/src/docs/elements/typography.md +++ b/src/docs/elements/typography.md @@ -2,7 +2,7 @@ title: "Typography" description: "Spruce CSS comes with fluid typography; it scales automatically depending on the viewport." order: 19 -github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/elements/typography.mdx" +github: "https://github.com/conedevelopment/sprucecss-site-eleventy/blob/main/src/docs/elements/typography.mdx" ---

Typography is an essential part of any system. With Spruce, you get basic styles for the most related HTML elements.

diff --git a/src/docs/getting-started/accessibility.md b/src/docs/getting-started/accessibility.md index 9b7bf08..ea44859 100644 --- a/src/docs/getting-started/accessibility.md +++ b/src/docs/getting-started/accessibility.md @@ -2,7 +2,7 @@ title: "Inclusivity and Accessibility" description: "Create more inclusive and accessible solutions using our micro-framework and its components." order: 5 -github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/accessibility.mdx" +github: "https://github.com/conedevelopment/sprucecss-site-eleventy/blob/main/src/docs/getting-started/accessibility.mdx" ---

Inclusivity and accessibility (A11Y) are some of the main concerns of Spruce CSS. We aim to help you develop more accessible web-based projects through our code and documentation, where we will try to show you small, related tips and guidance where necessary.

diff --git a/src/docs/getting-started/appendix.md b/src/docs/getting-started/appendix.md index e440a86..cdbf9b2 100644 --- a/src/docs/getting-started/appendix.md +++ b/src/docs/getting-started/appendix.md @@ -2,7 +2,7 @@ title: "Appendix" description: "In the appendix, you can find some references that inspired or gave any input related to any aspects of Spruce CSS or our learning in general." order: 10 -github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/appendix.mdx" +github: "https://github.com/conedevelopment/sprucecss-site-eleventy/blob/main/src/docs/getting-started/appendix.mdx" ---

In the appendix, you can find some references that inspired or gave any input related to any aspects of Spruce CSS or our learning in general.

diff --git a/src/docs/getting-started/contribution.md b/src/docs/getting-started/contribution.md index 76a76fd..d0145f7 100644 --- a/src/docs/getting-started/contribution.md +++ b/src/docs/getting-started/contribution.md @@ -2,7 +2,7 @@ title: "Contribution" description: "You can help us tremendously with any small contribution, like fixing a typo." order: 9 -github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/contribution.mdx" +github: "https://github.com/conedevelopment/sprucecss-site-eleventy/blob/main/src/docs/getting-started/contribution.mdx" ---

First, thank you for considering contributing to Spruce. We appreciate your time and effort in making this CSS system better. We want to make contributing to this project as easy and transparent as possible, whether it's:

diff --git a/src/docs/getting-started/installation.md b/src/docs/getting-started/installation.md index f4edc65..cf19c57 100644 --- a/src/docs/getting-started/installation.md +++ b/src/docs/getting-started/installation.md @@ -2,7 +2,7 @@ title: "Installation" description: "Install Spruce easily with npm or use it as a standalone dependency; it's all on you." order: 2 -github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/installation.mdx" +github: "https://github.com/conedevelopment/sprucecss-site-eleventy/blob/main/src/docs/getting-started/installation.mdx" ---

Spruce CSS is built on Sass; to get its full potential, you should use with it. If you want, you can load the compiled CSS too, but you will lose many features.

diff --git a/src/docs/getting-started/internationalization.md b/src/docs/getting-started/internationalization.md index bb727a8..a7f624c 100644 --- a/src/docs/getting-started/internationalization.md +++ b/src/docs/getting-started/internationalization.md @@ -2,7 +2,7 @@ title: "Internationalization" description: "With core internationalization support through modern CSS and its logical properties, you can handle RTL layouts more easily with Spruce CSS." order: 6 -github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/internationalization.mdx" +github: "https://github.com/conedevelopment/sprucecss-site-eleventy/blob/main/src/docs/getting-started/internationalization.mdx" ---

Internationalization (i18n) means preparing the code and design to handle different languages and writing modes.

diff --git a/src/docs/getting-started/introduction.md b/src/docs/getting-started/introduction.md index 3f8c717..29bf2a8 100644 --- a/src/docs/getting-started/introduction.md +++ b/src/docs/getting-started/introduction.md @@ -2,7 +2,7 @@ title: "Introduction" description: "Read more about our goals and intentions with Spruce CSS framework. Why we built it, and why is it a good choice for you too?" order: 1 -github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/introduction.mdx" +github: "https://github.com/conedevelopment/sprucecss-site-eleventy/blob/main/src/docs/getting-started/introduction.mdx" ---

Spruce is a Sass-based minimalistic CSS framework to get the foundation right for any web-based project.

diff --git a/src/docs/getting-started/print.md b/src/docs/getting-started/print.md index e4930ac..5de9b08 100644 --- a/src/docs/getting-started/print.md +++ b/src/docs/getting-started/print.md @@ -2,7 +2,7 @@ title: "Print" description: "With some necessary print styles, you can control better your print view with Spruce CSS framework." order: 7 -github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/print.mdx" +github: "https://github.com/conedevelopment/sprucecss-site-eleventy/blob/main/src/docs/getting-started/print.mdx" ---

Spruce has some print-related styles. Nothing severe or fancy, but a set of minimal styles.

diff --git a/src/docs/getting-started/sass.md b/src/docs/getting-started/sass.md index 4ea82ed..a838b92 100644 --- a/src/docs/getting-started/sass.md +++ b/src/docs/getting-started/sass.md @@ -2,7 +2,7 @@ title: "Sass" description: "Utilizing Sass helps you achieve more with less code and faster with built-in mixins and functions." order: 4 -github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/sass.mdx" +github: "https://github.com/conedevelopment/sprucecss-site-eleventy/blob/main/src/docs/getting-started/sass.mdx" ---

Spruce uses Sass (Syntactically Awesome Style Sheets) to generate CSS code. Sass is a popular and mature CSS extension language that lets us write stylesheets more programmatically.

diff --git a/src/docs/getting-started/structure-and-code.md b/src/docs/getting-started/structure-and-code.md index 8b78b23..040756c 100644 --- a/src/docs/getting-started/structure-and-code.md +++ b/src/docs/getting-started/structure-and-code.md @@ -2,7 +2,7 @@ title: "Structure and Code" description: "Explore the style guide and structure of Spruce CSS micro-framework. You can find some core principles and the main structure on this page." order: 3 -github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/getting-started/structure-and-code.mdx" +github: "https://github.com/conedevelopment/sprucecss-site-eleventy/blob/main/src/docs/getting-started/structure-and-code.mdx" ---

Spruce tries to be customizable and straightforward. You can find some core principles and the main structure on this page.

diff --git a/src/docs/sass/colors.md b/src/docs/sass/colors.md index a0cb362..2f41bd3 100644 --- a/src/docs/sass/colors.md +++ b/src/docs/sass/colors.md @@ -2,7 +2,7 @@ title: "Colors" description: "Through colors, you can genuinely make Spruce CSS your own. Control everything with the $colors map." order: 14 -github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/sass/variables.mdx" +github: "https://github.com/conedevelopment/sprucecss-site-eleventy/blob/main/src/docs/sass/variables.mdx" ---

Spruce CSS comes with a bunch of Sass variables and generates CSS custom properties.

diff --git a/src/docs/sass/functions.md b/src/docs/sass/functions.md index b086c84..c8192f1 100644 --- a/src/docs/sass/functions.md +++ b/src/docs/sass/functions.md @@ -2,7 +2,7 @@ title: "Functions" description: "The functions are an essential part of the Spruce CSS framework. You can get values, set up your fluid typography, and more." order: 17 -github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/sass/functions.mdx" +github: "https://github.com/conedevelopment/sprucecss-site-eleventy/blob/main/src/docs/sass/functions.mdx" --- ## color diff --git a/src/docs/sass/mixins.md b/src/docs/sass/mixins.md index e10dd67..74a39d4 100644 --- a/src/docs/sass/mixins.md +++ b/src/docs/sass/mixins.md @@ -2,7 +2,7 @@ title: "Mixins" description: "You can do more with less code with the mixins in Spruce CSS micro-framework." order: 16 -github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/sass/mixins.mdx" +github: "https://github.com/conedevelopment/sprucecss-site-eleventy/blob/main/src/docs/sass/mixins.mdx" --- ## a11y-card-link diff --git a/src/docs/sass/variables.md b/src/docs/sass/variables.md index 8ba4f38..9919bd7 100644 --- a/src/docs/sass/variables.md +++ b/src/docs/sass/variables.md @@ -2,7 +2,7 @@ title: "Variables" description: "The variables are fundamental for better customisability. Luckily Spruce CSS gives you a lot of them." order: 15 -github: "https://github.com/conedevelopment/sprucecss-site/blob/main/src/docs/sass/variables.mdx" +github: "https://github.com/conedevelopment/sprucecss-site-eleventy/blob/main/src/docs/sass/variables.mdx" ---

Spruce CSS has several Sass variables that it can generate into CSS custom properties.