Merge pull request #113 from szepeviktor/fixlinks

adamlaki · web-flow · commit 1e459f96f04c · 2025-12-01T09:49:23.000+01:00
Fix links
diff --git a/src/_includes/ui/md/card/post.md b/src/_includes/ui/md/card/post.md
@@ -4,7 +4,7 @@ There isn’t much work with the card component because the requirements mainly
 
 - if you use an image, you must set a [proper](https://adamlaki.com/bite-sized-accessibility/4-write-better-alt-text/) `alt` value.
 - If you list them, using a list with `<ul>` and `<li>` is a good idea.
-- If you have a publication date, use the <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time">time</a></code> element.
+- If you have a publication date, use the <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time">time</a></code> element.
 
 ## Variations
 
diff --git a/src/_includes/ui/md/misc/theme-switcher-button.md b/src/_includes/ui/md/misc/theme-switcher-button.md
@@ -3,7 +3,7 @@
 ## Technical Details
 
 - The script switches the `data-theme-mode` attribute on the `html` (and theme switcher) element to identify the selected theme.
-- You have to set up an [additional color theme](https://sprucecss.com/docs/customization/themes).
+- You have to set up an [additional color theme](https://sprucecss.com/docs/customization/themes/).
 
 ## Theme Detection
 
diff --git a/src/_includes/ui/md/misc/theme-switcher-select.md b/src/_includes/ui/md/misc/theme-switcher-select.md
@@ -3,7 +3,7 @@
 ## Technical Details
 
 - The script switches the `data-theme-mode` attribute on the `html` (and theme switcher) element to identify the selected theme.
-- You have to set up an [additional color theme](https://sprucecss.com/docs/customization/themes).
+- You have to set up an [additional color theme](https://sprucecss.com/docs/customization/themes/).
 
 ## Theme Detection
 
diff --git a/src/_includes/ui/md/navigation/breadcrumb-list.md b/src/_includes/ui/md/navigation/breadcrumb-list.md
@@ -21,4 +21,4 @@ $colors: (
 
 ## Resources
 
-- [Breadcrumb Example](https://www.w3.org/WAI/ARIA/apg/example-index/breadcrumb/index.html)
+- [Breadcrumb Example](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/)
diff --git a/src/_includes/ui/md/navigation/pagination.md b/src/_includes/ui/md/navigation/pagination.md
@@ -32,4 +32,4 @@
 - [generate-btn](https://github.com/conedevelopment/sprucecss/blob/main/scss/form/_button.scss)
 - [btn-variant](/docs/sass/mixins/#btn-variant)
 - [clear-list](/docs/sass/mixins/#clear-list)
-- [aria-current](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
+- [aria-current](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-current)
diff --git a/src/blog/4-areas-where-modern-css-solves-a-lot.md b/src/blog/4-areas-where-modern-css-solves-a-lot.md
@@ -16,7 +16,7 @@ Now have the `:has` selector, which is basically a parent selector. We can check
 
 Designing for multi-directional content can be a pain. If you have to support both LTR and RTL, you had to do more work in the past.
 
-With the new sets of [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties), no more are left/right or top/bottom; we can declare a direction relatively.
+With the new sets of [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values), no more are left/right or top/bottom; we can declare a direction relatively.
 
 Using logical values helps us to make a layout RTL from LTR easier.
 
diff --git a/src/blog/about-modern-sass.md b/src/blog/about-modern-sass.md
@@ -32,12 +32,12 @@ To talk about modern Sass, first, we must speak a little about old Sass. Let’s
 
 - One of its popular features of it was variables. Storing anything in a variable and reusing its value is present in a programming language, not a style sheet language. Of course, we use this feature today, but now we have CSS custom properties.
 - Making a grid system with CSS wasn’t viable, so we reached out for mixins and functions to make some generators for them.
-- We used a lot of mixin for hacks. I’m sure you know the [iframe hack](https://www.hacksoft.io/blog/responsive-iframes). Today we can use the new [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) property.
+- We used a lot of mixin for hacks. I’m sure you know the [iframe hack](https://www.hacksoft.io/blog/responsive-iframes). Today we can use the new [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/aspect-ratio) property.
 - We could separate our files by components and merge them at a build process with @import; this is useful today, but now we have @use and @forward.
 - We made mathematical calculations. Don’t get me wrong, we still make calculations with Sass, but now we have [calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc).
 
 {% notification %}
-Please note that we can still use the listed things (except [@import](https://sass-lang.com/documentation/at-rules/import), which is deprecated), but today we do not need them as much as we needed some years ago. Also, this is a personal list, nothing more.
+Please note that we can still use the listed things (except [@import](https://sass-lang.com/documentation/at-rules/import/), which is deprecated), but today we do not need them as much as we needed some years ago. Also, this is a personal list, nothing more.
 {% endnotification %}
 
 ## The Modern Sass
@@ -63,4 +63,4 @@ The modern Sass - _for me_ - means that we can use the new CSS features, but we
 
 ## Way More Easier to Use It
 
-One thing that developed is the build tools. Knowing your console is a generic skill for any developer, but it can be a barrier. You can easily include Sass into any tooling system, but my favorite is [Sass CLI](https://sass-lang.com/documentation/cli), which [we can use from npm scripts](https://sprucecss.com/blog/the-simplest-sass-compile-setup).
+One thing that developed is the build tools. Knowing your console is a generic skill for any developer, but it can be a barrier. You can easily include Sass into any tooling system, but my favorite is [Sass CLI](https://sass-lang.com/documentation/cli/), which [we can use from npm scripts](https://sprucecss.com/blog/the-simplest-sass-compile-setup/).
diff --git a/src/blog/how-to-choose-a-css-framework.md b/src/blog/how-to-choose-a-css-framework.md
@@ -49,10 +49,10 @@ Another Bootstrap-like solution is [Bulma](https://bulma.io/), which is also a m
 
 The most significant advantage of the mentioned ones is that they come with many resources, support, and excellent documentation. One significant disadvantage is that learning them and staying updated is more challenging (but a learning curve is always present).
 
-- If you need a smaller system, you can try [Pure.css](https://purecss.io/
+- If you need a smaller system, you can try [Pure.css](https://pure-css.github.io/
 ) or [Milligram](https://milligram.io/).
 - If you need a system without classes, you can try [Picnic CSS](https://picnicss.com/) or [water.css](https://github.com/kognise/water.css).
-- If you need a modern, low-level Sass-based system, give it a try to [Spruce CSS framework](https://sprucecss.com/docs/getting-started/introduction). It is a newer one but works for us.
+- If you need a modern, low-level Sass-based system, give it a try to [Spruce CSS framework](https://sprucecss.com/docs/getting-started/introduction/). It is a newer one but works for us.
 
 ## The Requirements
 
diff --git a/src/blog/how-to-configure-spruce-css-in-your-project.md b/src/blog/how-to-configure-spruce-css-in-your-project.md
@@ -6,7 +6,7 @@ alt: ""
 tags: ["how-to"]
 ---
 
-<p class="lead">Including Spruce CSS in your project is an easy job. First, you must install it (the best with npm) and set up the <a href="https://sprucecss.com/blog/the-simplest-sass-compile-setup">Sass compile</a>. Second, you need a quick config setting and are good to go.</p>
+<p class="lead">Including Spruce CSS in your project is an easy job. First, you must install it (the best with npm) and set up the <a href="https://sprucecss.com/blog/the-simplest-sass-compile-setup/">Sass compile</a>. Second, you need a quick config setting and are good to go.</p>
 
 A config setting is needed to set your custom values and generate Spruce’s styles.
 
diff --git a/src/blog/internationalization-right-to-left-support-with-css-frameworks.md b/src/blog/internationalization-right-to-left-support-with-css-frameworks.md
@@ -24,7 +24,7 @@ The logical properties and values give us control over our layout with logical d
 
 Although this article is mainly about LTR and RTL, you can not just control your layout horizontally but vertically if you wish so.
 
-You can set your writing mode with the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir" class="code-link"><code>dir</code></a> attribute or the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode" class="code-link"><code>writing-mode</code></a> CSS property.
+You can set your writing mode with the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir" class="code-link"><code>dir</code></a> attribute or the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/writing-mode" class="code-link"><code>writing-mode</code></a> CSS property.
 
 [The support for the logical properties can be mixed](https://caniuse.com/?search=logical%20properties), but with a prefixer, you can easily support the newer browsers.
 
@@ -108,7 +108,7 @@ div {
 }
 ```
 
-At this point, I am sure you get the idea behind the logical concept. It needs a different kind of thinking but is relatively easy to switch. [For the complete list, please visit MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties).
+At this point, I am sure you get the idea behind the logical concept. It needs a different kind of thinking but is relatively easy to switch. [For the complete list, please visit MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).
 
 ## The Layout Modes
 
diff --git a/src/blog/the-different-types-of-css-frameworks.md b/src/blog/the-different-types-of-css-frameworks.md
@@ -24,7 +24,7 @@ Naming this group is tricky. In my opinion, this is the original CSS framework;
 - It has almost everything that you need to build any project. Easy to start and hard to master (as usual).
 - You can use it with Sass and decide which module you want to use. For example, I only use the grid and the utilities when developing with it.
 
-You can put [Bulma](https://bulma.io/) and [Spruce CSS](https://sprucecss.com/docs/getting-started/introduction) into this group too.
+You can put [Bulma](https://bulma.io/) and [Spruce CSS](https://sprucecss.com/docs/getting-started/introduction/) into this group too.
 
 {% notification %}
 We can call these kinds of frameworks the traditional ones because these were the first ones.
@@ -62,7 +62,7 @@ The class-free CSS frameworks are pretty popular ones. These tools come without
 
 One excellent example of this type of solution is [Pico.css](https://picocss.com/). The main goal of it is simpleness. You don’t need tooling, and it has a moderate learning curve.
 
-To get the idea better, see the [compiled CSS on GitHub](https://github.com/picocss/pico/blob/master/css/pico.css). For another example, see [Water.css](https://watercss.kognise.dev/).
+To get the idea better, see the [compiled CSS on GitHub](https://github.com/picocss/pico/blob/main/css/pico.css). For another example, see [Water.css](https://watercss.kognise.dev/).
 
 ## More Categories
 
diff --git a/src/blog/the-simplest-sass-compile-setup.md b/src/blog/the-simplest-sass-compile-setup.md
@@ -8,7 +8,7 @@ tags: ["sass"]
 
 <p class="lead">Sass is an excellent tool to make CSS more dynamic, but it is still a burden for many of us because of the compiling settings. Let's see how we can set up a minimal but well-functioning configuration.</p>
 
-I think the easiest way to compile Sass is through npm scripts. Using npm scripts, we can run any shell command - *preconfigured, installed* - with a simple line. Sass comes with a [command-line interface](https://sass-lang.com/documentation/cli/dart-sass) (CLI), which we can configure widely; this is the one we will run through npm scripts.
+I think the easiest way to compile Sass is through npm scripts. Using npm scripts, we can run any shell command - *preconfigured, installed* - with a simple line. Sass comes with a [command-line interface](https://sass-lang.com/documentation/cli//dart-sass) (CLI), which we can configure widely; this is the one we will run through npm scripts.
 
 The current version of Sass is 1.42.1 and wrote on Dart. We have two deprecated packages named LibSass and Node Sass. In this tutorial, we - *and you should* - use Dart Sass which is the default setting on install when we run the `npm install sass` command.
 
@@ -92,7 +92,7 @@ sass-compile/
 
 We compile our Sass files from the `scss` to the `css` folder. **We don’t have to specify file names explicitly (necessarily);** the script will watch for all translatable files (the ones which don’t have a `_` prefix).
 
-For more information about the flags (the text in the command which stats with —), please visit the [official CLI page](https://sass-lang.com/documentation/cli).
+For more information about the flags (the text in the command which stats with —), please visit the [official CLI page](https://sass-lang.com/documentation/cli/).
 
 {% notification %}
 As you see, the npm scripts work like an alias (right now we only use the Sass CLI). You can run any of the commands directly in your terminal (in any order or parallel), but this example doesn’t show the full potential. Please note that this article is only about about the Sass compile. Based on the different needs, it can be a little bit complicated and more structured.
diff --git a/src/blog/why-use-sass.md b/src/blog/why-use-sass.md
@@ -17,7 +17,7 @@ It isn’t a CSS competitor; it is something that complements it. You still writ
 The same generic question as always and also the same answer: it depends on your need, on your context.
 
 - I think Sass can improve any project. Sure it gives an extra layer, but in the world of the CSS-in-JS solutions, I don’t think it is a big problem.
-- It is still helpful for a simple project because it is [easy to set up](https://sprucecss.com/blog/the-simplest-sass-compile-setup) and use through npm scripts. You can use its basic functionalities like the modules and nesting.
+- It is still helpful for a simple project because it is [easy to set up](https://sprucecss.com/blog/the-simplest-sass-compile-setup/) and use through npm scripts. You can use its basic functionalities like the modules and nesting.
 - If you are serious, it does not disappoint. Sass has many intermediate and advanced tools to help you build anything complex like your own CSS framework.
 
 Sass is a little bit for CSS, like jQuery for JavaScript. It shows a direction related to new features. Today we have [variables in plain CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) (a different type of variable, a more powerful one), which is progress.
diff --git a/src/blog/writing-better-css.md b/src/blog/writing-better-css.md
@@ -121,7 +121,7 @@ Quality control in CSS is a must. We can easily lint, prefix, and purge our code
 
 We should use the tools of the modern developer. I use Stylelint to lint my stylesheets with the Sass Guidelines and Autoprefixer to prefix some code (and [check browser support](https://github.com/browserslist/browserslist#best-practices)).
 
-I usually write SCSS. I like Sass; it is programmatic CSS which can be handy. It is also a way of processing your code too. On a basic level, you can write fewer lines of code, separate them, and merge them as you wish. On a more intermediate level, you can make your small framework. Compiling Sass is easy with [sass-cli](https://sass-lang.com/documentation/cli/dart-sass); [I wrote a simple guide about it on Pine](https://pineco.de/the-simplest-sass-compile-setup/).
+I usually write SCSS. I like Sass; it is programmatic CSS which can be handy. It is also a way of processing your code too. On a basic level, you can write fewer lines of code, separate them, and merge them as you wish. On a more intermediate level, you can make your small framework. Compiling Sass is easy with [sass-cli](https://sass-lang.com/documentation/cli//dart-sass); [I wrote a simple guide about it on Pine](https://pineco.de/the-simplest-sass-compile-setup/).
 
 If your codebase is vast and you don’t control it from the start, you can use Purge CSS to remove the unnecessary lines. For example, if you use the complete bootstrap grid, you will rarely use all of the utility classes. You can make your CSS 30-50% lighter if you purge it before publishing.
 
diff --git a/src/docs/getting-started/internationalization.md b/src/docs/getting-started/internationalization.md
@@ -25,5 +25,5 @@ It has relatively [good support](https://caniuse.com/css-logical-props), but we
 
 **For more information, please visit the following pages:**
 
-- [Basic concepts of Logical Properties and Values](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts)
-- [CSS Logical Properties and Values](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)
+- [Basic concepts of Logical Properties and Values](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts)
+- [CSS Logical Properties and Values](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values)
diff --git a/src/docs/getting-started/sass.md b/src/docs/getting-started/sass.md
@@ -19,7 +19,7 @@ Well, for this question, there are a lot of reasonable answers. In this case, we
 - using mixins and functions, we can create valuable helpers to access various functions or generated variables.
 - It is a framework (of some sort); it must be expandable and adjustable. With Sass `@use`, we can easily configure the default variables and settings.
 - Sass is more than just nesting (an excellent feature too). We can programmatically write and generate our CSS code.
-- It is evolving with new features. Also, today [setup the compiling](https://sprucecss.com/blog/the-simplest-sass-compile-setup) is a simple task through npm script.
+- It is evolving with new features. Also, today [setup the compiling](https://sprucecss.com/blog/the-simplest-sass-compile-setup/) is a simple task through npm script.
 
 ## Dart Sass, @use and @forward
 

Original file line number	Diff line number	Diff line change
`@@ -21,4 +21,4 @@ $colors: (`
`21`	`21`
`22`	`22`	`## Resources`
`23`	`23`
`24`		`-- [Breadcrumb Example](https://www.w3.org/WAI/ARIA/apg/example-index/breadcrumb/index.html)`
	`24`	`+- [Breadcrumb Example](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/)`