Merge pull request #32 from szepeviktor/spelling

Fix spelling

src/blog/8-helpful-sass-mixins-and-functions.md

@@ -6,7 +6,7 @@ alt: "A geometric illustration pattern."
 tags: ["scss"]
 ---
 
-<p class="lead">Sass is a CSS preprocessor, like CSS on steroids, a small programming language. Wheater it is helpful for your project or not, it is a powerful tool that can solve and simplify things.</p>
+<p class="lead">Sass is a CSS preprocessor, like CSS on steroids, a small programming language. Whether it is helpful for your project or not, it is a powerful tool that can solve and simplify things.</p>
 
 Why today's Sass is not the old Sass, [we wrote previously](/blog/about-modern-sass/). If you are interested in our thoughts, please check it out.
 

src/blog/about-modern-sass.md

@@ -51,7 +51,7 @@ For generic purposes, for a simple project (where you don’t have many dependen
 - The nesting to write [BEM-based](https://css-tricks.com/using-sass-control-scope-bem-naming/) (or other methodology-based) components.
 - Break your code into multiple files and [@forward or @use](https://sprucecss.com/blog/why-use-sass#use-and-forward) them.
 - To create (or use third-party) mixins that can make the development faster. One new mixin I will need often is a font-face one; because of the GDPR, I can’t include them directly from Google.
-- Write DRY code. Sass has three basic pilar: variables, functions, and mixins. With mixins, we can make reusable, configurable code blocks easily.
+- Write DRY code. Sass has three basic pillars: variables, functions, and mixins. With mixins, we can make reusable, configurable code blocks easily.
 - You can add logic to your code; for example, you can determine contrast automatically.
 - And last but not least: utilize CSS with it. Use CSS custom properties; they know more than a static variable. Combine them; each one is good in a different way.
 

src/blog/how-to-choose-a-css-framework.md

@@ -2,7 +2,7 @@
 title: "How to Choose a CSS Framework"
 date: "2022-03-17"
 featuredImage: "./src/img/blog/how-to-choose-a-css-framework.png"
-alt: "An illustration with a hand holding a lightbulb."
+alt: "An illustration with a hand holding a light bulb."
 tags: ["css"]
 ---
 

src/blog/how-to-configure-spruce-css-in-your-project.md

@@ -56,7 +56,7 @@ Inside the** _config.scss** file, we set our Spruce CSS customizations as you se
 
 Inside the **_styles.scss** file, we set the [generators](/docs/elements/generators). Usually, this means the `generate-styles`, but we can do it any way we want using the separate functions.
 
-If you want to configurate the generated content you can do it through the <code><a href="/docs/sass/variables/#generators">$generators</a></code> map where you can opt-out from each section separately.
+If you want to configure the generated content you can do it through the <code><a href="/docs/sass/variables/#generators">$generators</a></code> map where you can opt-out from each section separately.
 
 ```scss
 @use 'sprucecss/scss/spruce' as *;

src/blog/why-you-should-choose-eleventy-as-your-static-site-generator.md

@@ -21,11 +21,11 @@ Using your choice of tool, you can make the managing experience similar to any m
 
 ## Simple
 
-If you have any rutin with similar tools, it will be effortless to start with it. Initializing a new instance is like a charm. Updating from v1 to v2 is like a breeze.
+If you have any routine with similar tools, it will be effortless to start with it. Initializing a new instance is like a charm. Updating from v1 to v2 is like a breeze.
 
 In 11ty, all your stuff (almost) lives under the `src` folder (usually, but you can set up any structure you wish): your layout files, content, CSS, JS, and helpers.
 
-For templating, you have various options: Nunjucks (my choice), HTML, Markdown, WebC, JavaScript, Liquid, Handlebard, Mustache, EJS, Haml, Pug, or custom. So basically, any JS templating language.
+For templating, you have various options: Nunjucks (my choice), HTML, Markdown, WebC, JavaScript, Liquid, Handlebars, Mustache, EJS, Haml, Pug, or custom. So basically, any JS templating language.
 
 You don't need a JS framework to run it, which means no client-side JS (by default, you can use any of them if you wish) when generating your site.
 

src/docs/elements/forms.md

@@ -64,7 +64,7 @@ You can set two additional sizes with `form-control--sm` and `form-control--lg`
 
 ## File
 
-Use the `form-file` class on an `input[type="file"]` to nativly style the file input.
+Use the `form-file` class on an `input[type="file"]` to natively style the file input.
 
 - You can size the input with `form-file--sm` and `form-file--lg`.
 - The styling is the same as the `.btn`.

src/docs/elements/typography.md

@@ -210,6 +210,6 @@ sub <sub>element</sub>
 
 ## Variables, Helpers
 
-- [Typograhpy related variables](/docs/sass/variables/#typography)
+- [Typography related variables](/docs/sass/variables/#typography)
 - [font-size() function](/docs/sass/functions/#font-size)
 - [responsive-font-size() function](/docs/sass/functions/#responsive-font-size)

src/docs/getting-started/introduction.md

@@ -20,7 +20,7 @@ The generated CSS is relatively tiny (~7kb gzipped), somewhere around [+1500 lin
 - Keep it modern. Defining modern is challenging in a constantly changing environment, but the essence here is to **follow the new things in CSS**; this is a number one priority because it helps us learn and utilize the new stuff.
 - **Include just a few components.** For UI, we have a separate project named [Spruce UI](/ui/getting-started/introduction), where you can find drop-in components.
 - Follow semantic and accessibility best practices when possible; this doesn’t mean much in the core library but will be under the UI.
-- We don’t want to compete or be compared with other CSS frameworks. We think almost all of them are great - we learn(t) a lot from them. Besides, they have weaknesses and greatnesses, too, like Spruce CSS.
+- We don’t want to compete or be compared with other CSS frameworks. We think almost all of them are great - we learn(t) a lot from them. Besides, they have weaknesses and strengths too, like Spruce CSS.
 - Although it has some design opinions, it is not something to help you design (User Interfaces). The goal is to give you the correct patterns and a small system to help you create manageable projects in the long run; the UI is your job.
 - **Spruce CSS is just a tool. It can help you, and it will, but alone it can’t make your code better.** As with any framework or tool, your knowledge is what truly matters.
 

src/docs/sass/functions.md

@@ -19,7 +19,7 @@ Get color value by key and type name from the `$colors` map. The `$colors` map i
 |-------------------|---------------|-------------------------------------------------------------------|
 | `$key`            |               | The name of the color.                                            |
 | `$type`           | `'base'`        | The group of the color.                                         |
-| `$only-color`     | `false`       | Wheater to get just the color value or the CSS custom property.   |
+| `$only-color`     | `false`       | Whether to get just the color value or the CSS custom property.   |
 | `$map`            | `$colors`     | The name of the map from which the function will get the values.  |
 
 
@@ -96,7 +96,7 @@ If you use the CSS custom property mode, you should always use this function bec
 |--------------------|-------------------|-----------------------------------------------------|
 | `$key`             |                   | The name of the key.                                |
 | `$map`             |                   | The name of the map.                                |
-| `$custom-property` | `true`            | Wheater if you want CSS custom property or not.     |
+| `$custom-property` | `true`            | Whether if you want CSS custom property or not.     |
 
 [View Source on GitHub](https://github.com/conedevelopment/sprucecss/blob/main/scss/function/_config.scss#L29)
 

src/docs/sass/mixins.md

@@ -12,7 +12,7 @@ Create better card component linking by only using the title’s link (and not t
 | Name                            | Default Value  | Description                                                                      |
 | ------------------------------- | -------------- | -------------------------------------------------------------------------------- |
 | `$link`                         |                | The selector of the link element.                                                |
-| `$at-root`                      | `false`        | Wheater output the link as a child of the parent component or at the root level. |
+| `$at-root`                      | `false`        | Whether output the link as a child of the parent component or at the root level. |
 
 [View Source on GitHub](https://github.com/conedevelopment/sprucecss/blob/main/scss/mixin/_utilities.scss#L82)
 
@@ -468,7 +468,7 @@ Using the help of the `layout-stack` mixin, you can classical stack layout where
 | `$gap`         | `'m'`                    | The margin value between the elements. The value comes from the `$spacers` map, use any declared key name for shorthand. |
 | `$inline-size` | `false`                  | Whether it has explicit width (inline-size).                                                                             |
 | `$align`       | `none`                   | Set explicit align to the elements(`none`, `left`, `right`).                                                             |
-| `$important`   | `false`                  | Add !important on descandent elements to `margin-block-start`.                                                           |
+| `$important`   | `false`                  | Add !important on descendant elements to `margin-block-start`.                                                           |
 | `$split`       | `0`                      | Split the elements vertically from the nth element.                                                                      |
 
 [View Source on GitHub](https://github.com/conedevelopment/sprucecss/blob/main/scss/mixin/_layout.scss#L16)

src/templates/documentation.md

@@ -13,7 +13,7 @@ updated: "2023-12-17"
 templateTags: ["Eleventy", "Free"]
 ---
 
-<p class="lead">Welcome to the official documentation of **Spruce Docs** Elventy theme. A small template you can use to document any of your projects.</p>
+<p class="lead">Welcome to the official documentation of **Spruce Docs** Eleventy theme. A small template you can use to document any of your projects.</p>
 
 A documentation template is always helpful. There are a lot of solutions to make one; we wanted to create our self-hosted version based on our favorite static site generator [Eleventy](https://www.11ty.dev/).