fix: update some links in documentation site (#1433)

docs/pages/foundation/colors.html

@@ -13,7 +13,7 @@
 Colors bring designs to life.  It is used in a meaningful way to express emotions and tone, and promotes a distinct and consistent look and feel throughout all application.
 </p>
 
-<p>Each color is available to developers with a SASS mixin, CSS variables and as a series of <a href="/guides/design-system-utilities.html#colors">CSS helpers</a>.</p>
+<p>Each color is available to developers with a SASS mixin, CSS variables and as a series of <a href="{{site.baseurl}}/resources/design-system-utilities.html#colors">CSS helpers</a>.</p>
 
 
 {% include colors.html %}

docs/pages/foundation/spacing.html

@@ -47,7 +47,7 @@ <h2 class="docs-header-h2" id="spacing-sizes">Base Unit of 4</h2>
 
 <h2 class="docs-header-h2" id="spacing-usage">Spacing Usage for <code>padding</code> </h2>
 
-<p><a href="/guides/how-to-use-scss.html#spacing-function" target="_blank">SCSS Mixin</a>: <code>@include fd-space([$size)</code> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="/guides/design-system-utilities.html#margin-and-padding" target="_blank">Helper class</a>: <code>.fd-has-padding-[size]</code></p>
+<p><a href="{{site.baseurl}}/resources/how-to-use-scss.html#spacing-function" target="_blank">SCSS Mixin</a>: <code>@include fd-space([$size)</code> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="{{site.baseurl}}/resources/design-system-utilities.html#margin-and-padding" target="_blank">Helper class</a>: <code>.fd-has-padding-[size]</code></p>
 {% capture spacing-preview %}
 
 <div class="fd-has-padding-tiny">
@@ -68,7 +68,7 @@ <h2 class="docs-header-h2" id="spacing-usage">Spacing Usage for <code>padding</c
 
 <h2 class="docs-header-h2" id="spacing-usage">Spacing Usage for <code>margin</code> </h2>
 
-<p><a href="/guides/how-to-use-scss.html#spacing-function" target="_blank">SCSS Mixin</a>: <code>@include fd-space([$size)</code> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="/guides/design-system-utilities.html#margin-and-padding" target="_blank">Helper class</a>: <code>.fd-has-margin-[size]</code></p>
+<p><a href="{{site.baseurl}}/resources/how-to-use-scss.html#spacing-function" target="_blank">SCSS Mixin</a>: <code>@include fd-space([$size)</code> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="{{site.baseurl}}/resources/design-system-utilities.html#margin-and-padding" target="_blank">Helper class</a>: <code>.fd-has-margin-[size]</code></p>
 {% capture spacing-preview %}
 
 <div class="fd-has-margin-tiny">

docs/pages/resources/design-system-utilities.md

@@ -75,12 +75,12 @@ Use these CSS classes to control the text size. Used mainly for content text, al
 ## Colors
 {: .docs-header-h2}
 
-All colors on the [color pallete](/foundation/colors.html). Can be accessed via SCSS function and respective CSS classes.
+All colors on the [color palette]({{site.baseurl}}/foundation/colors.html). Can be accessed via SCSS function and respective CSS classes.
 
 ### Color Function
 {: .docs-header-h3}
 
-Colors can be accessed via color function [`fd-color({group}, {shade})`](how-to-use-scss.html#core-functions-and-mixins){:target:"_blank"}
+Colors can be accessed via color function [`fd-color({group}, {shade})`](how-to-use-scss.html#core-functions-and-mixins)
 
 ### Color Helper classes
 {: .docs-header-h3}
@@ -93,7 +93,7 @@ A foreground color class applies the color property to the element for example `
 | ------------------------------- | ----------------------- |
 | Foreground Class: <br> `.fd-has-color-{group}-{shade}` <br><br> Background Class:<br>`.fd-has-background-color-{group}-{shade}` | `action` - `1`, `2`, `3` <br> `shell` - `1`, `2` <br> `text` - `1`, `2`, `3`, `4` <br> `background` - `1`, `2`, `3`, `4`, `5`, `6` <br> `neutral` - `1`, `2`, `3`, `4`  <br> `status` - `1`, `2`, `3`, `4`, `5` <br> `accent` - `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, `13`, `14`, `15`, `16`|
 
-Please check the [colors page](colors.html){:target="_blank"} to see full color pallet.
+Please check the [colors page]({{site.baseurl}}/foundation/colors.html) to see full color palette.
 
 Some examples of color helper classes.
 {% capture color %}

docs/pages/resources/how-to-use-scss.md

@@ -157,7 +157,7 @@ If you have a need to apply a color to any of your scss/css class, you can use t
 }
 {% endhighlight %}
 
-You can refer to the [colors page](/fundamentals/colors.html){:target="_blank"} for the complete list of the available color options.
+You can refer to the [colors page]({{site.baseurl}}/foundation/colors.html){:target="_blank"} for the complete list of the available color options.
 
 ## Spacing Function
 {:.docs-header-h3}
@@ -171,7 +171,7 @@ The space function can be utilized for heights, padding, margins and other posit
 
 
 
-The design system defines a variety of spacing increments that are commonly used throughout and [all of those are available](https://github.com/SAP/fundamental/blob/develop/scss/_settings.scss#L18) using the mixin by passing the key. However, there are four units that will be used most often when building and extending components. These are accessible with special keys to apply consistent padding and margins.
+The design system defines a variety of spacing increments that are commonly used throughout and [all of those are available](https://github.com/SAP/fundamental/blob/master/scss/_settings.scss#L18) using the mixin by passing the key. However, there are four units that will be used most often when building and extending components. These are accessible with special keys to apply consistent padding and margins.
 
 {% highlight css %}
 .foo {