📝 Add colour scheme docs with preview swatches

exampleSite/content/docs/advanced-customisation.md

@@ -11,9 +11,9 @@ There are a few ways you can make style changes to Congo.
 
 ## Colour schemes
 
-Congo ships with a few colour schemes out of the box. To change the basic colour scheme, you can set the `colorScheme` theme parameter to one of the default configurations. Valid options are `congo` (the default), `avocado`, `fire`, `ocean` and `slate`.
+Congo ships with a number of colour schemes out of the box. To change the basic colour scheme, you can set the `colorScheme` theme parameter. Refer to the [Getting Started]({{< ref "getting-started#colour-schemes" >}}) section to learn more about the built-in schemes.
 
-In addition to the default scheme, you can also create your own and restyle the entire website to your liking. Schemes are created by by placing a `<scheme-name>.css` file in the `assets/css/schemes/` folder. Once the file is created, simply refer to it by name in the theme configuration.
+In addition to the default schemes, you can also create your own and re-style the entire website to your liking. Schemes are created by by placing a `<scheme-name>.css` file in the `assets/css/schemes/` folder. Once the file is created, simply refer to it by name in the theme configuration.
 
 Congo defines a three-colour palette that is used throughout the theme. The three colours are defined as `neutral`, `primary` and `secondary` variants, each containing ten shades of colour.
 

exampleSite/content/docs/configuration.md

@@ -54,7 +54,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 <!-- prettier-ignore-start -->
 |Name|Type|Default|Description|
 | --- | --- | --- | --- |
-|`colorScheme`|string|`"congo"`|The theme colour scheme to use. Valid values are `congo` (default), `avocado`, `ocean`, `fire` and `slate`. Refer to [Advanced Customisation]({{< ref "advanced-customisation#colour-schemes" >}}) for more details.|
+|`colorScheme`|string|`"congo"`|The theme colour scheme to use. Valid values are `congo` (default), `avocado`, `ocean`, `fire` and `slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details.|
 |`logo`|string|_Not set_|The relative path to the site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions.|
 |`description`|string|_Not set_|The description of the website for metadata purposes.|
 |`mainSections`|array of strings|_Not set_|The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used.|

exampleSite/content/docs/getting-started.md

@@ -34,6 +34,40 @@ The `[author]` configuration determines how the author information is displayed
 
 Further detail about these configuration options is covered in the [Configuration]({{< ref "configuration" >}}) section.
 
+## Colour schemes
+
+Congo ships with a number of colour schemes out of the box. To change the scheme, simply set the `colorScheme` theme parameter. Valid options are `congo` (default), `avocado`, `fire`, `ocean` and `slate`.
+
+```toml
+# config/_default/params.toml
+
+colorScheme = "congo"
+```
+
+Congo defines a three-colour palette that is used throughout the theme. Each main colour contains ten shades which are based upon the colours that are included in [Tailwind](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).
+
+#### Congo (default)
+
+{{< swatches "#71717a" "#8b5cf6" "#d946ef" >}}
+
+#### Avocado
+
+{{< swatches "#78716c" "#84cc16" "#10b981" >}}
+
+#### Fire
+
+{{< swatches "#78716c" "#f97316" "#f43f5e" >}}
+
+#### Ocean
+
+{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
+
+#### Slate
+
+{{< swatches "#6B7280" "#6B7280" "#6B7280" >}}
+
+Although these are the default schemes, you can also create your own. Refer to the [Advanced Customisation]({{< ref "advanced-customisation#colour-schemes" >}}) section for details.
+
 ## Organising content
 
 By default, Congo doesn't force you to use a particular content type. In doing so you are free to define your content as you wish. You might prefer _pages_ for a static site, _posts_ for a blog, or _projects_ for a portfolio.

exampleSite/content/docs/installation.md

@@ -101,4 +101,4 @@ config/_default/
 
 You're now all set up to use Congo. From here you can add some content and start the Hugo server.
 
-Refer to the Hugo docs for more information or read the next section to learn more about configuring the theme.
+Refer to the [Hugo docs](https://gohugo.io/getting-started/) for more information or continue to the [Getting Started]({{< ref "getting-started" >}}) section to learn more about configuring the theme.

exampleSite/layouts/shortcodes/swatches.html

@@ -0,0 +1,14 @@
+<div class="flex justify-between">
+  <span
+    class="w-full py-6 mr-3 rounded-md"
+    {{ with .Get 0 }}style="background-color: {{ . }}"{{ end }}
+  ></span>
+  <span
+    class="w-full py-6 mr-3 rounded-md"
+    {{ with .Get 1 }}style="background-color: {{ . }}"{{ end }}
+  ></span>
+  <span
+    class="w-full py-6 mr-3 rounded-md"
+    {{ with .Get 2 }}style="background-color: {{ . }}"{{ end }}
+  ></span>
+</div>