Change GH links

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);
 }
 

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"
 ---
 
 <p class="lead">In Spruce CSS, the settings are global options controlled through a Sass map.</p>

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"
 ---
 
 <p class="lead">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).</p>

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"
 ---
 
 <p class="lead">Spruce CSS is a highly customizable through variables. In this post, you will learn how to get and customize them.</p>

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"
 ---
 
 <p class="lead">Spruce comes with basic button variations like size, width, color, state and can also generate your custom color variants.</p>

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"
 ---
 
 <p class="lead">Spruce CSS comes with overall form support for styling the different native elements. Also, it has some form layout helpers.</p>

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"
 ---
 
 <p class="lead">The generators are special (a naming convention in Spruce CSS only) mixins, which we use to generate base styles.</p>

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"
 ---
 
 <p class="lead">Under media, you can find some of the media-related styles.</p>

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"
 ---
 
 <p class="lead">Spruce ships with some basic table styling targeted only with classes to opt-in.</p>

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"
 ---
 
 <p class="lead">Typography is an essential part of any system. With Spruce, you get basic styles for the most related HTML elements.</p>

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"
 ---
 
 <p class="lead">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.</p>

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"
 ---
 
 <p class="lead">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.</p>

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"
 ---
 
 <p class="lead">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:</p>

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"
 ---
 
 <p class="lead">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.</p>

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"
 ---
 
 <p class="lead">Internationalization (i18n) means preparing the code and design to handle different languages and writing modes.</p>

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"
 ---
 
 <p class= "lead">Spruce is a Sass-based minimalistic CSS framework to get the foundation right for any web-based project.</p>

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"
 ---
 
 <p class="lead">Spruce has some print-related styles. Nothing severe or fancy, but a set of minimal styles.</p>

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"
 ---
 
 <p class="lead">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.</p>

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"
 ---
 
 <p class="lead">Spruce tries to be customizable and straightforward. You can find some core principles and the main structure on this page.</p>

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"
 ---
 
 <p class="lead">Spruce CSS comes with a bunch of Sass variables and generates CSS custom properties.</p>

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

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

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"
 ---
 
 <p class="lead">Spruce CSS has several Sass variables that it can generate into CSS custom properties.</p>